WordPress外链图实现Fancybox 3灯箱效果-伊阳博客

本文最后更新于2021年3月31日，已超过 3 年没有更新，如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

大家都知道，在wordpress中外链图片是无法使用Fancybox 3灯箱效果的；只有图片在媒体库里才默认支持灯箱特效，对于一些空间太小的虚拟主机用户来说是个很大的问题；速度也是个问题。自己经过多次研究，终于解决了外链图实现Fancybox 3灯箱效果。

Fancybox 3灯箱效果的格式为：

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

给文章页内的图片链接添加 data-fancybox 属性的函数为：

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

但是文章页内的外链图片代码格式为：

<img src =“https://www.xxx.com/thumbnail.jpg” alt =“My caption”/>

这样要实现Fancybox 3灯箱效果，就必须给<\img>添加<\a><\/a>标记，其实只要将上述函数代码修改为下面的就可以实现。代码如下：

//fancybox3图片添加 data-fancybox 属性
add_filter('the_content', 'fancybox');
function fancybox ($content){
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

Fancybox 3灯箱效果实现方法

1、将上述函数代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。
2、在文件头（如主题内的 header.php 文件）中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件（可以使用以下代码中的链接，或者直接下载后上传到所使用主题文件夹内再添加）。

<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>

下载地址

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