Press "Enter" to skip to content

纯代码实现 WordPress 灯箱效果 – FancyBox

今天推荐一款 FancyBox 纯代码实现灯箱效果。FancyBox 提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。也就是说 FancyBox 不仅可以给图片添加灯箱效果,同样也可以给 html、视频这些内容添加灯箱效果。详细的内容你可以参考官网文档,有详细的演示和用法。

代码版的方法最初是在俍注的这篇文章看见,不过他用的版本是 3.2.7 ,目前最新的 FancyBox 版本是 3.5.7。

首先需要先部署三个文件,两个 JS 一个 CSS 。第一个文件 jquery-3.3.1.min.js 主题一般都会引用,所以可根据自己的情况是否添加。

下面两个是必须要用的。南方这里是从自己的静态资源服务器引用,大家可根据自己的路径设置正确的链接。

为了避免拷贝错误,南方在下面分享了压缩包文件,或者亦可到官网下载。

  <script src="https://res.nfyy.cn/blog/js/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://res.nfyy.cn/blog/css/jquery.fancybox.min.css" />
  <script src="https://res.nfyy.cn/blog/js/jquery.fancybox.min.js"></script>

将上面代码添加到自己的 WordPress 主题当中的 header.php 文件里的 <head> 和 </head> 之间。

最后将下面的代码放入 WordPress 主题下的 functions.php 文件中即可实现效果。

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="images"><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;
}

展示效果如下所示:

广州塔夜景
珠海市野狸岛

如果一切顺利,那么你的网站现在点击图片就可以看到图片灯箱效果,不满意默认效果?那就来自定义配置吧。更多配置项请:查看官方文档

注意:

南方发现在使用第三方图床的情况下。比如南方使用的是阿里云 OSS 在使用自带的图片处理(比如添加水印、裁剪等),如果添加了样式(添加水印)的情况下 FancyBox 将不起作用。如下图:

示例 1
示例 2

这两张图片南方使用了阿里云 OSS 自动添加水印,大家看这两张图片有什么区别?是不是 FancyBox 对第一张图片无效,对第二张图片有效。

下面我将两张图片的链接放出来大家一看便懂了。

图片示例 1:https://res.nfyy.cn/blog/1907/dc668b48cf9dbba49871549281eec60b.jpg-wm
图片示例 2:https://res.nfyy.cn/blog/1907/dc668b48cf9dbba49871549281eec60b.jpg-wm.jpg

两个图片链接的区别就是其中一个是 .jpg 结尾。外链图片使用图片后缀结尾就可以解决 FancyBox 对第三方图床不生效的问题。

阿里云 OSS 为例,在 OSS 管理控制台中找到图片处理,然后点击新建样式。如下图:

如果有更好的解决方案,欢迎交流!

发表评论

电子邮件地址不会被公开。 必填项已用*标注