為WordPress加入Fancybox相冊功能免插件實現

          20130507204843

          博客搭建已經有好幾天了,上線比較匆忙。白天也忙工作沒有多少時間完善它,在之前就一直用著Fancybox這款相冊插件。由于我現在的主題使用的jquery是1.9的,安裝相冊插件之后貌似出現了不少問題??礃幼颖匦璧米约簞邮至?。在網上找了很久的資料,自己也嘗試了很久。網上大部分都是用的lightbox,我從官網下載了最新版的不支持jQuery1.9。所以找資料無果后自己動手..
          首先從Fancybox官網下載它的壓縮包,在主題的JS目錄內新建一個fancybox目錄。把下載的壓縮包解壓找到sources目錄中的下列文件

          拷貝到fancybox目錄。到這里,基礎工作準備完畢,下一步就開始引用fancybox
          1、修改主題function.php文件
          在function.php文件中加入

          //fancybox 自動對圖片鏈接添加rel=fancybox屬性
          add_filter('the_content', 'pirobox_gall_replace');
          function pirobox_gall_replace ($content)
          {
              global $post;
              $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
              $replacement = '<a$1href=$2$3.$4$5 rel="fancybox" $6="">$7';
              $content = preg_replace($pattern, $replacement, $content);
              return $content;
          }

          代碼解讀:添加文章后,將文章中的圖片鏈接自動添加上rel=fancybox屬性用于在初始化時對圖片的篩選
          2、修改主題header.php文件
          在header.php文件中加入

          <script src="<?php bloginfo('template_url') ?>/js/fancybox/jquery.fancybox.pack.js"></script>
          <script type="text/javascript">
              $(function() {
                  jQuery(".gallery a").attr({rel: "fancybox"});
                  jQuery("a[rel=fancybox]").fancybox();
              });
          </script>

          別往下看了,所有工作已經完成,現在你可以去后臺發布文章看看效果了。當然我在做這個功能的時候還是遇到了一點點小問題,下面是對問題處理的過程:

          問題1:使用$(“.gallery a”)和$(“a[rel=fancybox]”)提示找不到對象錯誤
          解決方案:將“$”替換成”jQuery”即可

          問題2:使用jQuery(“a[@rel*=fancybox]”)作為選擇器條件時出現“Syntax error, unrecognized expression: a[@rel*=fancybox]”錯誤
          解決方案:將”a[@rel*=lightbox]”替換成”a[rel=fancybox]”即可,出現原因是因為jquery的版本導致的

          如果還有誰遇到了問題,歡迎隨時補充。下面一起來看看效果

          本博客所有文章如無特別注明均為原創

          如果覺得對你有幫助,可以通過下方打賞對作者表示鼓勵

          本文采用知識共享署名-非商業性使用-相同方式共享

          如若轉載,請注明出處:《為WordPress加入Fancybox相冊功能免插件實現》http://www.solariosolutions.com/127.html

          (0)
          打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
          鋒哥的頭像鋒哥管理員
          上一篇 2013年5月6日 14:41
          下一篇 2013年5月8日 14:10

          相關推薦

          發表回復

          登錄后才能評論

          評論列表(21條)

          • 龍笑天
            龍笑天 2014年5月23日 22:13

            對于特別大的圖片,怎樣讓它產生雙擊出現原圖且圖片能拖動呢?

            • 龍笑天
              龍笑天 2014年5月23日 22:14

              @龍笑天或者出現一個顯示原圖的按鈕且圖片可以拖動!

            • 胖子的頭像
              鋒哥 2014年5月24日 23:01

              @龍笑天這個插件顯示的大圖是超鏈接的圖。而默認顯示的是你放在超鏈接里面的圖,你點擊圖片打開的就是大圖了。這個也是可以拖動的啊。

          • 熊熊
            熊熊 2014年4月12日 12:59

            那怎么把這效果加入到視頻中捏?

            • 胖子的頭像
              鋒哥 2014年4月13日 20:53

              @熊熊推薦你去看看他們官網www.fancybox.net,它里面有關于視頻iframe的彈出方式,和圖片差不多。

            • 熊熊
              熊熊 2014年4月13日 22:16

              @鋒哥謝謝,我去看看

          • CY's BLOG
            CY's BLOG 2014年2月21日 21:01

            這代碼和大發提供的比較類似。
            我提出個疑問,怎樣才能顯示圖片的名字呢?

            • 胖子的頭像
              鋒哥 2014年2月22日 18:57

              @CY’s BLOG你是要在打開圖片之后顯示圖片的名字還是?

            • CY's BLOG
              CY's BLOG 2014年2月23日 19:10

              @鋒哥對的,就像fancybox插件默認的效果那樣。

              能在底部或是什么地方把圖片名稱顯示出來。

            • 胖子的頭像
              鋒哥 2014年2月23日 21:11

              @CY’s BLOG這個可以的,需要把參數修改一下就可以了。你要看看它的API。

            • CY's BLOG
              CY's BLOG 2014年2月24日 09:54

              @鋒哥好滴,回頭仔細看看

          • mooc
            mooc 2014年2月10日 20:03

            學習了~! :grin: 不過還想問一下,怎么設置參數呢?我試了下在.fancybox(); 括號中間加入’overlayColor’: ‘#000’, 沒有效果,怎么做呢?

            • 胖子的頭像
              鋒哥 2014年2月11日 08:44

              @mooc試試fancybox({’overlayColor’: ‘#000′});

          • logmi
            logmi 2014年1月4日 10:53

            為什么我不行??? :mad:

            • 胖子的頭像
              鋒哥 2014年1月4日 12:12

              @logmi你是按照我的這種方式來做的嗎?如果是的應該可以。除非你的主題里面還有其他的插件導致不兼容了。

            • whaever
              whaever 2014年1月16日 19:17

              @鋒哥在header.php文件中加入

              可能先于 jquery.js 加載 自然 $ 函數 不會生效效

              在 foot.php 中加比較好

            • 胖子的頭像
              鋒哥 2014年1月16日 19:33

              @whaever嗯。加載foot中也行,這個看個人喜好就好了。

          • 魅葉子
            魅葉子 2013年8月10日 08:38

            說的不明不白。 :mad:

            • 胖子的頭像
              鋒哥 2013年8月11日 15:47

              @魅葉子真的不好意思,文筆不好。我也在慢慢的鍛煉。請見諒!如果有看不懂或者不理解得歡迎與我私聊。

          • 魅葉子
            魅葉子 2013年8月10日 08:27

            站點的JS目錄在哪? :???:

            • 胖子的頭像
              鋒哥 2013年8月11日 15:46

              @魅葉子站點的js目錄就是你主題里面新建一個名字叫做JS得文件夾。

          国产厨房乱子伦露脸,XXXXAAA欧美,日本 888 XXXX,国产欧美日韩一区二区图片