为WordPress文章页增加图片Fancybox灯箱效果

Fancybox是一个JavaScript库,用于以优雅的方式呈现图像,视频和任何HTML内容。它具有您期望的所有功能 - 触摸启用,响应和完全可定制。

我们可以直接使用FancyBox来完成我们的需求

1、允许我们用鼠标和键盘上的四个方向键切换图片

2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放

3、支持缩略图列表、放大、全屏等功能

4、弹出框支持显示多种类型的内容:图片、html、视频...

5、支持触控、缩放手势操作图片

官方下载地址

实现加入 FancyBox 灯箱效果教程

<!-- 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.2.5/jquery.fancybox.min.css" />
<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>

<!-- 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 属性即可,需要将以下代码添加到当前主题的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;
}

为您推荐

发表评论

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