本站点一直都是使用 Fancybox 2.1.5 版本的灯箱效果,这次看到官网上的 Fancybox 3 演示效果非常喜欢,所以这次就把本站的 Fancybox 2.1.5 版本直接升级到 Fancybox 3.1.20 版本,具体的效果可以自行点击本文图片体验哦。
Fancybox 3 官方使用教程
- <!-- 1. Add latest jQuery and fancyBox files -->
- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
- <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>
- <!-- 2. Create links -->
- <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
- <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
- <!-- 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 属性添加标题。例如:
- <a href="image.jpg" data-fancybox data-caption="My caption">
- <img src =“thumbnail.jpg” alt =“My caption”/>
- </a>
为文章页内的图片链接添加 data-fancybox 属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。
- //fancybox3图片添加 data-fancybox 属性
- add_filter('the_content', 'fancybox');
- function fancybox ($content){
- global $post;
- $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
- $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
- $content = preg_replace($pattern, $replacement, $content);
- return $content;
- }
拓展阅读
如果是使用懿古今所分享的 WordPress 主题,如 Nana主题为例,还需要删除 style.css 文件中关于 fancybox 方面的代码,如下图所选中的代码:
接着在 functions.php 文件中找到添加视频的代码:
- <a class="videos" href="'.$href.'" title="播放视频">
修改为
- <a data-fancybox data-type="iframe" class="videos" href="'.$href.'" title="播放视频">
具体视频播放效果请移步《一个女人来敲门》或见下图:
最后在 jquery.fancybox.min.js 文件后面添加以下代码:
- $(document).ready(function(){$("#load").fancybox({helpers:{title:{type:'outside'},overlay:{speedOut:0}}})});
以确保下载弹窗能够正常使用(PS:下载弹窗效果请点击上文的下载按钮自行体验)。
发表于2017-08-10 09:16 沙发
手机端点一下弹出,再点一下不会收回。这个不太人性化。电脑端还没测试。
@Koolight[偷笑] 估计是老古删了部分js导致的。
@Koolight移动端点击其他地方不会显示,不过手指往上或往下滑动就会消失,或者点击关闭按钮。
发表于2017-08-10 12:30 板凳
整了一下没整成功,放弃了。
发表于2017-08-11 10:22 地板
找个机会也参考着整整~ [呲牙]
@龙笑天PC端和移动端的效果都不错哦,可以折腾试试
发表于2017-08-11 13:52 4楼
不错,过来支持一下先!
发表于2017-08-13 13:11 5楼
刚才在 站长统计 里看到一个网站,用你的 Logo,不知道是不是你的
yangduters.com
@言曌博客[威武] 谢谢告知,这种情况一般都是使用本站分享的主题,然后尚未替换站点LOGO所致。
发表于2018-09-20 10:19 6楼
那么问题来了,NANA3.24版本里具体怎么使用呢,难道还需要改代码么?赐教
@我苗子Nana主题早已集成,在文章中添加图片时链接到图片本身即可
发表于2019-06-09 15:33 7楼
非常感谢这篇文章,昨天研究一下午做了个通用版的,但只支持纯图片预览,不支持图片和视频混合浏览,目前来讲够用了,最新版的好像不支持全屏了,昨天赶时间所以一直问你 [笑哭]
@魏义齐个人博客图片和视频需要添加的东西好像不太一样。这种功能够用就行,有时候还真不一定需要最新版。