Simple Fancybox图片灯箱效果插件-支持外链增加A标签属性

对于用WordPress建站的小伙伴，一般喜欢让图片显示灯箱效果，之前虾皮路也介绍过《“您的页面可能存在图片不可全屏查看”百度移动落地页检测问题解决办法》，说过增加图片的灯箱效果。但是有的主题，按原来的代码方法无法实现，一般都要增加A标签后就可以实现图片灯箱效果了。这里虾皮路就介绍一下支持外链增加A标签属性的图片灯箱效果插件-Simple Fancybox。

1、什么是fancybox

fancybox官网：https://fancyapps.com/fancybox/3/

自定义文档：https://fancyapps.com/fancybox/3/docs/

fancybox是一个JavaScript的lightbox效果插件，就是我们常说的图片灯箱效果。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。

fancybox不光支持PC端，移动端同样支持；

支持图片、html文本、flash动画、iframe以及ajax，支持自定义效果和功能。

也就是说使用fancybox你不单单可以给图片添加灯箱效果，也可以给html、视频这些内容添加灯箱效果，详细的内容你可以参考官网页面的下半部分，有详细的演示和创意用法。

2、Simple Fancybox插件灯箱图片插件

Simple Fancybox for WordPress image gallery. Works for both, shortcode gallery in classic editor and Gutenberg blocks. Install and activate, nothing else to set up here. Fancybox will work for WordPress galleries. Only important thing is to set link to file, we don’t want to open attachment page. By default, the plugin will use jQuery to apply FancyBox to any thumbnails that link directly to an image.

Fancybox includes support for touch gestures and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers.

WordPress图片库的简单Fancybox。适用于经典编辑器中的shortcode画廊和Gutenberg块。安装并激活，这里没有其他设置。Fancybox将适用于WordPress画廊。唯一重要的是设置文件链接，我们不想打开附件页面。默认情况下，该插件将使用jQuery将FancyBox应用于直接链接到图像的任何缩略图。

Fancybox包括对触摸手势的支持，甚至支持缩放手势。它非常适合移动和桌面浏览器。

直接到WordPress后台插件下载安装即可。

插件下载地址：https://wordpress.org/plugins/simple-fancybox/

默认的Simple Fancybox插件是启用灯箱效果，但是在一些主题上却不管用，为什么呢，因为这个插件默认只是给图片img添加了data-fancybox=”gallery”属性，但是并没有添加a标签属性，所以需要给图片添加一个超链接到原图的属性。

可以直接下载虾皮路的这个版本，直接自动增加A标签属性，支持外链图片

下载地址：https://shopee6.lanzous.com/iRIBOduzcdi

直接下载后上传启用即可。

或者可以自行修改官方的版本

插件第42行及43行换成下面的代码

$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";"/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';'<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';

3、代码方法

如果不喜欢使用插件的，可以使用代码的方法

在网站的footer.php加入如下代码，目前以最新版的3.5.7版本为准

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

因为大部分主题都带有带有jquery的js文件，因此虾皮路不建议再多加一个js文件，如果用不了，那也可以引用这个代码

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

最后，在自己主题的functions.php里最后的 ?>前加入如下代码

/**FancyBox图片灯箱自动给图片加链接**/
add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

保存后就可以看到效果了。但是虾皮路会发现这个代码不一定适用于所有主题，比如虾皮路启用后就会崩溃，不懂为什么。因此适用的还是用插件吧。