给WordPress网站DUX主题添加图片放大功能 纯代码实现

最近一直在为自己WordPress网站dux主题添加一个图片放大效果的功能，Wordpress也有很多这个插件，但用起来总感觉不是特别好，插件总归影响小站的加载速度，，所以今天给大家分享一个用代码实现图片放大功能的方法。

效果演示

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

 

下载地址

插件下载

传送门：http://fancyapps.com/fancybox/3/

官方使用说明

1.  Add latest jQuery and fancyBox files
```html
<script src="//code.jquery.com/jquery-3.2.1.min.js">
<link  href="/path/to/jquery.fancybox.min.css" rel="stylesheet">
<script src="/path/to/jquery.fancybox.min.js">
```
2.  Create links
```html
<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. Enjoy!

其实使用方法很简单，就是在文件头（如主题内的 header.php 文件）中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件，而 jquery-3.2.1.min.js 文件一般不用理会，因为 dux3.0 主题已经引入有 jQuery 库了。

站长是在 header.php 文件引入的，就是在这个文件的

标签后面添加以下代码：

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

然后把下载下来的文件 jquery.fancybox.min.css 和 jquery.fancybox.min.js 放到网站根目录！
接着只需要给我们站点文章内图片的链接添加 data-fancybox 属性即可，还可以使用 data-caption 属性添加标题。

例如：

<a data-fancybox="gallery" href="img.jpg">
    <img src="img.jpg">
</a>

这样就可以看到效果了！

二次优化

为文章页内的图片链接添加 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;
}

这样就可以直接使用 fancybox3 功能了。

调用代码：

如果你学会了，赶快给自己的WordPress网站dux主题添加上这么精简的图片放大功能吧。

注意事项（必读）：
1、本站所展示的一切软件、教程和内容信息等资源均仅限用于学习和研究目的，请在下载后24小时内自觉删除；不保证其完整性及可用性，本平台不提供任何技术支持，若作商业用，请到原网站购买，由于未获授权而发生的侵权行为与本站无关。如有侵权请联系vip#mmeasy.cn（将#替换成@），我们将及时处理。
2、一切网盘资源请勿在线解压！在线解压会提示文件损坏或密码错误，特别注意若压缩包名带part1或z01这样的标识，则均为分卷压缩包，需要下载每个文件夹下的所有压缩包后，用WinRAR软件解压part1或zip即可释放当前文件夹下所有压缩包的内容！
3、如果链接失效，遇到资源失效可提交工单处理。
4、强烈建议在本站注册成为会员后再购买，游客购买只能短期保留记录，如超期或购买后自行清空浏览器缓存，将恢复购买前状态！
本文链接：https://www.mmeasy.cn/1055.html