https://qiniu.vlwx.com/Fancybox3.png
FancyBox 简单介绍
Fancybox 是一个 JavaScript 库,用于以优雅的方式呈现图像,视频和任何 HTML 内容。它具有您期望的所有功能 – 触摸启用,响应和完全可定制。
依赖
jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+
兼容性
fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。
特点
移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
多个实例:它可以打开一个模式,而另一种是仍然可见。
快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
GPU 加速:硬件加速的动画有更好的表现。
响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。
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://www.vlwx.com/go/?url=aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvZmFuY3lib3gvMy4yLjUvanF1ZXJ5LmZhbmN5Ym94Lm1pbi5jc3M=" target="_blank" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/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>
说明:其实使用方法很简单,就是在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以上代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加),而 jquery-3.2.1.min.js 文件一般不用理会,因为大部分 WordPress 站点都已经引入有 jQuery 库了。
接着只需要给我们站点文章内图片的链接添加 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
文件最后一个 ?>
的前面即可。
/* ================================================== fancybox图片灯箱效果 http://www.vlwx.com ================================================== */ add_filter('the_content', 'fancybox1'); add_filter('the_content', 'fancybox2'); function fancybox1($content){ global $post; $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>'; $content = preg_replace($pattern, $replacement, $content); return $content; } function fancybox2($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; }
此代码同时支持有a标签的文章和没有a标签的文章,自动识别,无需手动给图片添加a标签。