0°

[Wordpress主题修改]给7b2及其他主题文章页增加图片Fancybox灯箱效果-支持放大自动播放等

本文共2315个字,预计阅读时间需要6分钟。
使用7b2主题后有很多很多的不习惯,功能感觉其实都差不多,但学习的空间更多了,比如vue.js等等等等,今天我们就来给7b2增加一个灯箱效果

Fancybox介绍

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

依赖

  • jQuery 3+ 是首选,但 fancyBox 适用于 jQuery 1.9.1+ 和 jQuery 2+(7b2主题是没有用JQuery的)

兼容性

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

特点

  • 移动第一:每个设备上看起来不错;支持最常见的触控手势-双击,捏放和捏出来的图像浏览; 水平滑动进行导航。
  • 多个实例:它可以打开一个模式,而另一种是仍然可见。
  • 快速和简易安装:就在两个文件,无需编写 JavaScript 代码一行来实现。
  • 自动内容识别:支持最流行的网站诸如 YouTube,Vimeo 的和谷歌地图的开箱。
  • GPU 加速:硬件加速的动画有更好的表现。
  • 响应:设置使用任何 CSS 单位,浏览器将完成剩下的内容维度;所有的图形,包括加载图标,仅与 CSS 创建。

fancybox官方引入教程

1.添加jQuery和fancyBox文件

<!-- 加载jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 加载 FancyBox -->
<link  href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
<script src="/path/to/jquery.fancybox.min.js"></script>

2.创建图片链接,给图片的链接添加 data-fancybox 属性

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

WordPress修改方法

  • 此方法适用于大多数主题~

文章页内的图片链接添加 data-fancybox 属性可以使用函数自动添加,只需要将以下代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。(此段代码会自动识别文章内的图片并自动添加上data-fancybox 属性)

/*
==================================================
fancybox图片灯箱效果 2019年9月18日22:35:05
==================================================
*/
add_filter('the_content', 'fancybox1');
add_filter('the_content', 'fancybox2');
function fancybox1($content){ 
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
function fancybox2($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;
}

接下来就是引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(7b2还需引入jQuery)

<!-- 建议使用cdn链接,因为比较快233 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<!-- 7b2主题请引入下面的的JQuery (其他不带有JQuery的主题也一样 基本上都有 7b2用的vue比较特殊 -_- ) -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

博主还在官方找到了插件,但是没有去测试,能尽量不折腾就不折腾吧

插件地址:https://cn.wordpress.org/plugins/w3dev-fancybox/

效果展示

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论