北极寒流 » 网络资源 » wordpress博客用Slimbox2实现lightbox效果(免插件) - 2011.02.27

wordpress博客用Slimbox2实现lightbox效果(免插件)

wordpress博客(免插件)用Slimbox2实现lightbox效果。图片比较多的wordpress博客如果来点lightbox图片特效,那无疑为你的博客增色不少。只是,很多lightbox效果插件比较臃肿,虽然lightbox效果非常漂亮,但是影响博客速度还是有点不值得,那在wordpress上有没有免插件实现lightbox效果的办法呢?下面就给大家分享免插件实现lightbox效果

首先是JQuery(你必须先加载JQuery)请确定你的博客加载了JQ库,没有加载JQ库的话,请把下面代码加入header.php相关位置。如果加载过就无需重复加载了。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

然后是js的调用:

<?php if (is_singular()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slimbox2.js"></script>
<?php } ?>

不在首页加载可以提高首页打开速度。放在header.php中JQuery下边,或者footer.php中
接下来是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%;}
#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(images/closelabel.gif) no-repeat center;    margin: 5px 0;outline: none;}
#lbCaption,#lbNumber,#lbBottom{display:none;}

将以上css添加到你的css文件内即可

最后一项,也是最关键的一项就是范围的控制了:

$(".post-content a:has(img)").slimbox(); //范围区域要选择好,不然是有a标签的图片都被加效果了……

例如我博客的范围选择标签就是

$(".postbg a:has(img)").slimbox();

以上代码我已经放在了slimbox.js文件内了,你也可以放在其他地方,不过一定要记得在$(document).ready(function(){  });内。post-content是文章的属性名,你需要根据你自己的主题决定。如果你不知道你的文章的属性名,可以打开single.php,找到<?php the_content(); ?>,夹着它的div的class既是这里要控制的属性。如果没有可以加上一个~

文章提及的相关文件下载(请选择IE下载)
slimbox2.js文件放在你主题的JS文件夹下,那些图片文件放在你主题images文件夹下。需要修改范围控制也请修改其中的slimbox2.js文件。

下载地址1下载地址2丨来自壹品集

1个评论

  1. Flyヽ 说道:

    WordPress 添加灯箱插件 – Slimbox
    http://lfei.org/wordpress-slimbox-lightbox/

评论关闭