wordpress 添加fancybox3图片暗箱

GavinWu 2021年01月11日 Wordpress 239 次阅读

给图片添加弹出层暗箱效果也不是什么困难的事,今天说的是使用新版的fancybox3来实现wordpress的图片暗箱效果。新版本比较以前实现更简单,效果更好。

一、加载fancybox插件

1
2
3
4
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--如果主题已经引用了jQuery库,可以忽略这条-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

当然你也可以去官方下载文件到本地加载。fancybox3官方网站

二、给图片链接添加标签

新版的fancybox已经使用新的标签data-fancybox=””和data-caption=” “,以前的rel标签已失效!使用图片的结构变成下面的样式:

1
2
3
<a href="XX.png" data-fancybox="gallery" data-caption="图片文章" alt="图片文章"  title="图片文章" ><img src="XX" alt=""/></a>

<a href="XX" data-fancybox="gallery" data-caption="图片文章" alt="图片文章"  title="图片文章" ><img src="XX.png" alt=""/></a>

其中的data-fancybox=””和data-caption=” “是必要标签。data-fancybox的值要一致,表示是一个相册,当然也可以分开显示几个相册。data-caption表示是下面的图片说明。
在wordpress里可以通过function.php文件实现所有图片自己添加标签。

1
2
3
4
5
6
7
8
9
//自动添加标签属性
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="gallery" data-caption="'.get_the_title().'" alt="'.get_the_title().'"  title="'.get_the_title().'" $6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

上面的data-fancybox可以改成其他你喜欢的,data-caption也是。

三、文章添加图片链接到媒体文件

其实这个方法可以用到任何网页上来实现图片暗箱效果!

其他更多效果和参数说明,见官方网站

  • 暂无相关文章

发表评论