WordPress外链图实现Fancybox 3灯箱效果

大家都知道,在wordpress中外链图片是无法使用Fancybox 3灯箱效果的;只有图片在媒体库里才默认支持灯箱特效,对于一些空间太小的虚拟主机用户来说是个很大的问题;速度也是个问题。自己经过多次研究,终于解决了外链图实现Fancybox 3灯箱效果。

Fancybox 3灯箱效果的格式为:

// HTML CODE

0
<a href="image.jpg" data-fancybox data-caption="My caption">
1
<img src =“thumbnail.jpg” alt =“My caption”/>
2
</a>

给文章页内的图片链接添加 data-fancybox 属性的函数为:

// PHP CODE

0
//fancybox3图片添加 data-fancybox 属性
1
add_filter('the_content', 'fancybox');
2
function fancybox ($content){
3
global $post;
4
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\&#8221;)(.*?)>(.*?)<\/a>/i&#8221;;
5
6
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
7
$content = preg_replace($pattern, $replacement, $content);
8
return $content;
9
}

但是文章页内的外链图片代码格式为:

// HTML CODE

0
<img src =“https://www.xxx.com/thumbnail.jpg” alt =“My caption”/>

这样要实现Fancybox 3灯箱效果,就必须给<\img>添加<\a><\/a>标记,其实只要将上述函数代码修改为下面的就可以实现。代码如下:

// PHP CODE

0
//fancybox3图片添加 data-fancybox 属性
1
add_filter('the_content', 'fancybox');
2
function fancybox ($content){
3
global $post;
4
$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\&#8221;)(.*?)>/i&#8221;;
5
6
$replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6><img$1src=$2$3.$4$5$6></a>';
7
$content = preg_replace($pattern, $replacement, $content);
8
return $content;
9
}

Fancybox 3灯箱效果实现方法

1、将上述函数代码添加到当前主题的functions.php 文件最后一个 ?> 的前面即可。
2、在文件头(如主题内的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件(可以使用以下代码中的链接,或者直接下载后上传到所使用主题文件夹内再添加)。

// HTML CODE

0
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>

PS:这个 CSS 文件和 JS 文件,可以下载本文的文件代码包或者官网直接下载,解压后在 fancybox-master\dist\ 文件夹内,我们使用 min 版本即可,当然也可以使用完整的版本。
赞(0)
未经允许不得转载:伊阳博客 » WordPress外链图实现Fancybox 3灯箱效果
所属分类: WordPress

留言 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

表情 关闭