给 WordPress 添加 Fancybox 3 灯箱效果

2018年5月23日 1 条评论 1.05k 次阅读 2 人点赞

讲真,酷客星球觉得 Fancybox 3 效果还是蛮不错的——高大上,最重要一点响应式,所以心痒痒开始折腾了。

Fancybox 3 官方介绍:

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

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

  • fancyBox 包括对触控手势的支持,甚至支持缩放手势。它非常适合手机和桌面浏览器。

特点

  • 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。

  • 多个实例:它可以打开一个模式,而另一种是仍然可见。

  • 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。

  • 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。

  • GPU 加速:硬件加速的动画有更好的表现。

  • 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

官方教程:

<!-- 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 文件引入CSS,在footer.php文件引入JS文件,酷客星球用的min版的,你可以用完整版。

<link rel="stylesheet" href="jquery.fancybox.min.css" />
<script src="jquery.fancybox.min.js"></script>

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

Jackwill

这个人太懒什么东西都没留下