最近一直在为自己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、本站提供的一切软件、教程和内容信息等资源均仅限用于学习和研究目的,严禁将上述内容用于商业或者非法用途;
2、本站仅提供共享服务,不提供任何技术咨询服务,请知悉谅解;
3、如果对相关资源比较满意,请前往购买支持正版,得到更好的正版服务;
4、本站信息来自网络公开信息的收集整理,版权争议与本站无关。我们非常重视版权问题,如有侵权请联系我们,我们会第一时间进行处理。
本文链接:https://www.mmeasy.cn/1055.html