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

以用户为中心, 其它一切纷至沓来!——Google 信条

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

Fancybox 3灯箱效果的格式为:

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

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

//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;
}

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

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

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

//fancybox3图片添加 data-fancybox 属性
add_filter('the_content', 'fancybox');
function fancybox ($content){
    global $post;
    $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6><img$1src=$2$3.$4$5$6></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
Fancybox 3灯箱效果实现方法

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
<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

留言 抢沙发