给WordPress文章图片添加Fancybox 3灯箱效果教程

投稿   懿古今  2017-08-10 07:36:10  180 人阅读  38 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

本站点一直都是使用 Fancybox 2.1.5 版本的灯箱效果,这次看到官网上的 Fancybox 3 演示效果非常喜欢,所以这次就把本站的 Fancybox 2.1.5 版本直接升级到 Fancybox 3.1.20 版本,具体的效果可以自行点击本文图片体验哦。

给WordPress文章图片添加Fancybox 3灯箱效果教程 WordPress 第1张

FancyBox 简单介绍

Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 - 触摸启用,响应和完全可定制。

官方网站、使用文档及文件代码包

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

  • fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。

特点

  • 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
  • 多个实例:它可以打开一个模式,而另一种是仍然可见。
  • 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
  • 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
  • GPU 加速:硬件加速的动画有更好的表现。
  • 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

Fancybox 3 官方使用教程

  1. <!-- 1. Add latest jQuery and fancyBox files -->
  2. <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
  5. <!-- 2. Create links -->
  6. <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
  7. <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
  8. <!-- 3. Have fun! -->

说明:其实使用方法很简单,就是在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress 站点都已经引入有 jQuery 库了。

PS:这个 CSS 文件和 JS 文件,可以下载本文的文件代码包或者官网直接下载,解压后在 fancybox-master\dist\ 文件夹内,我们使用 min 版本即可,当然也可以使用完整的版本。

接着只需要给我们站点文章内图片的链接添加 data-fancybox 属性即可,还可以使用 data-caption 属性添加标题。例如:

  1. <a href="image.jpg" data-fancybox data-caption="My caption">
  2.     <img src =“thumbnail.jpg” alt =“My caption”/>
  3. </a>

为文章页内的图片链接添加 data-fancybox 属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。

  1. //fancybox3图片添加 data-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 data-fancybox="images"$6>$7</a>';
  7.     $content = preg_replace($pattern$replacement$content);
  8.     return $content;
  9. }

拓展阅读

如果是使用懿古今所分享的 WordPress 主题,如 Nana主题为例,还需要删除 style.css 文件中关于 fancybox 方面的代码,如下图所选中的代码:

给WordPress文章图片添加Fancybox 3灯箱效果教程 WordPress 第2张

接着在 functions.php 文件中找到添加视频的代码:

  1. <a class="videos" href="'.$href.'" title="播放视频">

修改为

  1. <a data-fancybox data-type="iframe" class="videos" href="'.$href.'" title="播放视频">

具体视频播放效果请移步《一个女人来敲门》或见下图:

给WordPress文章图片添加Fancybox 3灯箱效果教程 WordPress 第3张

最后在 jquery.fancybox.min.js 文件后面添加以下代码:

  1. $(document).ready(function(){$("#load").fancybox({helpers:{title:{type:'outside'},overlay:{speedOut:0}}})});

以确保下载弹窗能够正常使用(PS:下载弹窗效果请点击上文的下载按钮自行体验)。

给WordPress文章图片添加Fancybox 3灯箱效果教程 WordPress 第4张

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:http://yigujin.cn/1301.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. Koolight
    Koolight 【尚书】 @回复

    电脑端测试很酷炫,进出效果也很符合Windows。

    • 懿古今
      懿古今【村长】2017-08-11 21:10  回复

      @Koolight[嘻嘻] 移动端可以左右移动,上下滑动就消失,还可以手指放大,挺好的

  2. 姜哥说
    姜哥说 【状元】 @回复

    我想找一个内容页下一页快捷键的功能,哈哈。

  3. 一伍一拾
    一伍一拾 【秀才】 @回复

    效果不错!!!

  4. 在线看小说
    在线看小说 【举人】 @回复

    两个站点的文章同步?

  5. 在线看小说
    在线看小说 【举人】 @回复

    我用来展示历史老照片应该不错

  6. 明月登楼
    明月登楼 【王爷】 @回复

    感觉主题自带的暗箱效果已经很满意了!不折腾了就!

  7. 劲家庄微商
    劲家庄微商 【小白】 @回复

    不错,学习了。

  8. 雅兮网
    雅兮网 【尚书】 @回复

    我的jquery库还停留在1.8.3 看来已经落后了 [偷笑] 要用新功能还要升级库啊 [嘻嘻]

  9. 于闻观纸
    于闻观纸 【小白】 @回复

    功能强大,ZB没有…

  10. 九哥
    九哥 【举人】 @回复

    一直想弄,这个不错,比之前的效果好。

    • 懿古今
      懿古今【村长】2017-08-10 12:57  回复

      @九哥[嘻嘻] 这个功能确实比以前的强大很多,特别是移动端,上下左右滑动,放大缩小都挺好的

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

    功能强大,来学习学习,以后用得着的地方来搬运就好。

  12. 钓鱼小站
    钓鱼小站 【进士】 @回复

    什么黑科技啊,这么6.

  13. 赚钱小站
    赚钱小站 【书童】 @回复

    感觉厉害了。

  14. 小苍老师
    小苍老师 【进士】 @回复

    学习了,挺不错的!

  15. 很文博客
    很文博客 【书童】 @回复

    功能是越来越多了,节奏根本跟不上呀!

  16. 幻想
    幻想's Blog 【秀才】 @回复

    了解了,挺不错的

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

    哈哈,zblog里面也有这个功能

    • 懿古今
      懿古今【村长】2017-08-10 10:46  回复

      @爱时尚其实就是JS和CSS代码,理论上任何站点正确引用文件后都可以实现。

  18. 心动
    心动 【举人】 @回复

    不错不错,很喜欢!

  19. 龙笑天
    龙笑天 【状元】 @回复

    厉害了 我的导航~

  20. 福利堆
    福利堆 【尚书】 @回复

    这个功能很实用

  21. Parkmimi
    Parkmimi 【秀才】 @回复

    The requested content cannot be loaded.
    Please try again later.
    出现这样怎么破233333

    • 懿古今
      懿古今【村长】2017-08-10 09:47  回复

      @Parkmimi出现这个就说明加载不成功,看看是不是缺少相应的data-fancybox 属性,请看对应的官方文档,比如视频,或图片,或图片集对应的data-fancybox 属性都不一样。

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

    牛逼了word导航兄!

  23. 品牌馆
    品牌馆 【书童】 @回复

    很实用的功能