给wordpress主题集成Fancybox图片暗箱特效

之前用的Colorbox图片暗箱特效,感觉不太好,用浏览器审查元素,右下角一直提示有代码错误,所以今天就撤掉Colorbox换成了Fancybox。看了看效果还是很不错滴,点击查看效果展示

一、首先下载Fancybox相关文件:

二、下载解压后从source文件夹中选择如下几个基本文件:

blank.gif
fancybox_loading.gif
fancybox_loading@2x.gif
fancybox_overlay.png
fancybox_sprite.png
fancybox_sprite@2x.png
jquery.fancybox.css
jquery.fancybox.pack.js

三、在function.php文件中加入代码:

//自动添加pirobox暗箱标签属性
add_filter('the_content', 'pirobox_gall_replace');
function pirobox_gall_replace ($content)
{ global $post;
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="fancybox"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

四、在header.php或者footer.php文件中加入代码:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox.css" />
<script src="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(function() {
jQuery(".gallery a").attr({rel: "fancybox"});
jQuery("a[rel=fancybox]").fancybox();
});
</script>

因为我把source文件夹换成了fancybox放在主题的根目录里。
然后大功告成了!

本文共 10 个回复

  1. Finle says:
    fancybox 文件比较大。。
    1. 小二苘 PO主 says:
      @Finle 确实,但是这是我目前看到的比较喜欢的了,等有了更好的再换掉
  2. Specs says:
    我之前也用的这个,但是要引入JS,、CSS,还得有图片等等好几个文件,所以现在就换了~
  3. Pingback: wordpress主题集成插件Slimbox2图片暗箱特效 - 网站相关 - 萌月

发表留言,喵!