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

给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主题添加上这么精简的图片放大功能吧。

Free Download WordPress Themes
Download Best WordPress Themes Free Download
Download WordPress Themes
Download Best WordPress Themes Free Download
lynda course free download
download lava firmware
Download Premium WordPress Themes Free
online free course

搜一下 获取更多

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

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

评论 2

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

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

    佛系软件 1个月前 (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

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