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

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

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://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;
}