wordpress 添加fancybox图片暗箱
给图片添加弹出层暗箱效果也不是什么困难的事，今天说的是使用新版的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> |
2022年更新
上述CDN库不能用，建议更新以下地址
1 2 | https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css |
当然你也可以去官方下载文件到本地加载。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也是。
三、文章添加图片链接到媒体文件
其实这个方法可以用到任何网页上来实现图片暗箱效果！
文章评论（1 条）