wordpress主题集成插件Slimbox2图片暗箱特效

人生就是这么折腾出来的,昨天用了Fancybox图片暗箱特效,今天就换成了Slimbox2图片暗箱特效,同样的思路只是JS代码和按钮小图标不一样而已。看了finle的建议,还是用小巧一点的比较舒服,本来用的国外空间,网站打开速度都不理想,再加载Fancybox的JS和CSS文件就更慢了。

一、下载SlimBox2 for WordPress插件(原作者网站),或者https://github.com/lmm214/slimbox2-lite
二、将里面的图片放在主题的images文件夹里。
三、将CSS文件里的代码复制粘贴到主题style.css文件里。

/* SLIMBOX2 */
#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}
.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}

四、将slimbox2.min.js文件复制粘贴到主题的js文件夹里,编辑slimbox2.min.js,将下面代码删除:

//适用范围需自行调整
jQuery(document).ready(function($){
$("a[rel!=link]:has(img)").slimbox();
});

五、在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文件中加入代码:

<script src="<?php bloginfo('template_url') ?>/js/slimbox2.min.js"></script>
<script type="text/javascript">
$(function() {
jQuery(".gallery a").attr({rel: "fancybox"});
jQuery("a[rel=fancybox]").slimbox();
});
</script>

╮( ̄▽ ̄”)╭ 太懒了,懒得修改前面用的fancybox字样,就这么滴吧。你可以将五和六中的fancybox改成你喜欢的代码。预览效果

本文共 10 个回复

  1. 柠檬 says:
    phZoom其实比slimbox更小,更快 :twisted:
      1. 柠檬菌 says:
        @小二苘 我用的就是这个插件 ,作者以前是也是博客圈子的,后来就大家就一起不见了···现在去点友情链接没几个能打开的,好忧桑
  2. rccoder says:
    折腾的妹子赶快过来帮个忙,为什么我一直感觉我的站在手机端打开那么卡呢。。。。。

发表留言,喵!