全百科精品资源分享
免费优质资源下载平台

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

播放按钮
全百科网免费发布推广信息
文章目录

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

效果演示

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

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 功能了。

调用代码:

<a href="img.jpg">
    <img src="img.jpg">
</a>

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

Download WordPress Themes Free
Download Best WordPress Themes Free Download
Download Nulled WordPress Themes
Download Premium WordPress Themes Free
ZG93bmxvYWQgbHluZGEgY291cnNlIGZyZWU=
download lava firmware
Download Best WordPress Themes Free Download
free download udemy paid course

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(1)
全百科网 » 给WordPress网站DUX主题添加图片放大功能 纯代码实现
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-499

    怎么用代码添加超链接,加粗等按钮功能,和可视化编辑器功能一样,就是在html编辑器中添加一些按钮实现

    佛系软件 10个月前 (01-22) 这家伙可能用了美佬的代理 谷歌浏览器  ONEPLUS A6000) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.136 Mobile Safari/537.36 回复
    • @佛系软件 可以参考:WordPress后台文章编辑器添加下拉式短代码选择http://www.quanbaike.com/news/2532.html

      全百科推广 10个月前 (01-22) 来自天朝的朋友 搜狗浏览器 Windows 10 回复