今天给大家介绍的 jquery 图片播放插件叫 Fancybox，相比 LightBox 来说，Fancybox 相对庞大点，配置也更丰富一些，FancyBox 是一款基于 jquery 开发的类 Ligh1 0 ~ k /tbox 插件。支持对放大的图片添加O $ K q g 8 q \阴影效果，对于一组相关= * B y L \ T .的图片添] _ # & r C e A加导航操作按K + O T 3 6纽，该 lightbox 除了能够展示图片之外，还可以展示 iframed 内容， 通过 css 自定义外观。相对与 Lightbox 而言，阴影效果更好。但是比 Lightbox 绚丽。
在 header.php 添加以下代码
- <K 8 , U ^ g;!-- 图片放大 -->
- <link rel="sty* % w R klesheet" href="hj Q 4 ^ R 1ttps://cdn.jsdelivr.net/gh/fancyapps/fancybo7 ; T [ ( W Ax@3.5.7/dist/jquery.fancybox.min.css" />
在 footer.php 添P k @ a d K C加以下代码
- <!-- 图片放大 -->
- <script src="https://cdn.jsdelivr.net/gh/fancyapps\ y w s k d / k s/fancybox@3.5.7/dist/jquery.fancybox.min.js">&a M ( a g !lt;/scrir F . 0 3 0 Y ept>
在 functions.php 添加以下代码
- /**图片灯箱~ 7 F ; + H -自动给图片加链接**/
- add_filter('the_content'i V ] | $, 'fancybox');
- function fancybox($content- $ h F){
- $pattern = array("/<img(.*?)src=('2 l $|\")([^>]*).(bmp|gif|jpZ r b b ! Jeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\&Z m A * #quot;)([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i&& H $ T % [ : qquot;);
- $replacement = arrayF { & w 0 ~ o l F('<a$1href=$2$3.$4$5 data-fancybox="galO : Y J j D [ #lery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox=&quoP ^ ? T * vt;images"$6>$7</a>');
- $content = preg_replace( y t M x40;$pU o 8 L g :attern, $replacement,V R 5 d I f e % V $content);
- return $content;
- }
效果如下：
