纯代码实现WordPress加入fancybox暗箱效果

投稿   龙砚庭博客  2017-07-07 07:34:44  272 人阅读  21 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

暗箱效果最大的作用,其实不单单是美观大气,更多的用途在于减少加载原图(按需加载,只有点击了图片才会弹窗原图),所以我们在插入图片的时候,最好是选择裁剪好的小尺寸,然后链接到媒体文件。这样一来,打开文章的时候,加载的是小图;点击图片的时候,加载的是原图。那么如何实现 WordPress 站点加入 fancybox 暗箱效果呢?其实教程很简单,只需要引入几个文件、以及几段代码便能实现该功能。

纯代码实现WordPress加入fancybox暗箱效果 WordPress 第1张

(点击弹窗)

实现 WordPress 加入 fancybox 暗箱效果教程

1、下载 fancybox 文件,将其放到主题根目录。

2、打开 functions 文件,在最后一个 ?> 前扔进以下代码:

  1. //fancybox图片灯箱效果
  2. add_filter('the_content', 'fancybox');
  3. function fancybox ($content)
  4. global $post;
  5. $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
  6. $replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>';
  7. $content = preg_replace($pattern$replacement$content);
  8. return $content;
  9. }

3、打开 header.php 文件,在 </head> 标签前面,添加以下代码,引入 css:

  1. <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/fancybox/fancybox.css" />

使用过程中,如果发现没有关闭按钮跟左右按钮,说明 fancybox.css 里面的素材路径写错了,注意打开将其修改为与自身主题吻合的路径即可。

4、打开 footer.php 文件,在 </body> 标签前面,添加以下代码,引入 js:

  1. <!-- 加载 Fancybox JS文件 -->
  2. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/fancybox/fancybox.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function() {
  5.         $(".fancybox").fancybox();
  6.                 $("#showdiv").fancybox({'centerOnScroll':true});
  7.     });
  8. </script>

如果主题没有加载过任何 jquery.js,那么需要在第 2、3 行之间加载该文件:

  1. <script src="jquery.js文件的真实路径"></script>

<!–路径可以是以下任一版本的文件–>

//百度压缩版

http://libs.baidu.com/jquery/2.0.0/jquery.min.js

//微软压缩版

http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js

//官网压缩版(目前官网最新版好像是3.1.1,将下面的2.0.0替换一下即可)

http://code.jquery.com/jquery-2.0.0.min.js

图片暗箱效果的使用

插入图片的时候,一定要有 <a> 标签,不然没有暗箱效果。即:【添加多媒体】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前,选择【附件显示设置】链接到【媒体文件】。

历史上的今天:

文章标签: ,   ,  
原文地址:http://loomob.com/172.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. 九哥
    九哥 【进士】 @回复

    用的还是少。

  2. 橘子书
    橘子书 【丞相】 @回复

    其实就是图片与头像按需加载。

    • boke112导航
      boke112导航【村长】2017-07-10 17:50  回复

      @橘子书明白了,其实就是延迟加载,原来你们叫做懒人加载

  3. 橘子书
    橘子书 【丞相】 @回复

    暗箱功能跟懒人加载这几个功能配合使用,对网站的流畅来说,其实挺好的。

    • boke112导航
      boke112导航【村长】2017-07-09 21:24  回复

      @橘子书暗箱功能我明白,什么是懒人加载功能???

      • mengkun
        mengkun 【小白】2017-07-10 09:05  回复

        @boke112导航lazyload 图片延时加载,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置。 (难怪Nana 主题一直没加入这个功能… )

        • boke112导航
          boke112导航【村长】2017-07-10 17:51  回复

          @mengkun你说延时加载功能我就认识,懒人加载不认识。原先是打算加进去的,但是感觉意义不大,大多数博客图片都不多,我现在就是在本站的评论开启这个功能。

  4. 旭博客
    旭博客 【小白】 @回复

    [亲亲] 这个好

  5. 脚丫网赚
    脚丫网赚 【进士】 @回复

    很实用的方法,图片多的站点可以试试!

  6. 夏天烤洋芋
    夏天烤洋芋 【进士】 @回复

    很多的博客主题里面,都带有这个功能的。

  7. 淘小众
    淘小众 【举人】 @回复

    好久没来,过来支持下

  8. 管家婆
    管家婆 【进士】 @回复

    最近正在研究WordPress 正好用上 不知楼主有没有好的模板

  9. 灵异世界网
    灵异世界网 【进士】 @回复

    很赞的功能!

  10. 小萝博客
    小萝博客 【状元】 @回复

    正中我的意

  11. VideoClub
    VideoClub 【尚书】 @回复

    功能很少用

  12. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    很好的技术性文章,支持博主

  13. 小苍老师
    小苍老师 【状元】 @回复

    哎呀学到了,晚上试试看去!上次那JS点击出字的特效,蛮好的!

  14. 爱时尚
    爱时尚 【尚书】 @回复

    以后就叫你代码哥,什么都能用代码实现

  15. 电脑维修
    电脑维修 【状元】 @回复

    沙发了;板凳了;学点代码知识

  16. 寒辞
    寒辞 【书童】 @回复

    板凳了,学习了 [思考]

  17. 励志语录
    励志语录 【进士】 @回复

    沙发了,学习了。