嗯,奚少回归了,先个大家拜个晚年咯~兔年一切好!顺祝元宵佳节快乐幸福~其实已经回来几天了,但是各种忙,所以拖到今天来糟蹋我的博客了,嘿嘿。感谢朋友们一直以来对我的支持,如果再不更新我都无地自容了,所以赶紧凑篇文章,让光临奚少小窝的朋友也有个说话的地方哈~

今年第一次更新,目标依旧是wordpress,针对的就是我喜欢的免插件了~

入正题:很多朋友喜欢在博客中插入一些图片,正如我天天挂在嘴边的“无图无真相”,那么在图片展示上不知道各位童鞋有没有下功夫呢?我是从刚刚接触博客就开始用了lightbox这个插件,总体感觉:很好很强大!好在不太复杂,强大在功能比较完善。今天的主角却是另外一位:Slimbox2.今天我就和大家推荐及分享一下这款插件了!效果图在最下边。

如果你喜欢使用插件的话,可以去搜lightbox插件,一大堆哦。但是我又不太喜欢插件,所以从木木那里见到过这篇文章后就狂喜折腾。但是看着很简单的东西在我这个新手还是有一定的难度的,木木也只是点到为止,所以我就疯狂的折腾了,没想到还真被我实现了,前几天一位博友问起过,所以今天弄出来,凑凑数~

首先是js,你可以直接下载我的js,或者点这里下载(4.11KB)。

首先是JQuery(你必须先加载JQuery):

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

把以上代码放入header.php(如果加载过就无需重复)

然后是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标签的图片都被加效果了……

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

差点忘了,还有几张图片(含js),网盘打包下载。上传到主题根目录的images文件夹下即可。

好了,如果没有差错的话,就可以了!

最后补上效果,请猛击下边图片!(左:图片放大;右:图片变换)

免插件Slimbox2实现lightbox效果 免插件Slimbox2实现lightbox效果

补充:林木木童鞋已经将这些代码组合成了新的插件,很小很强大的!如果不喜欢折腾代码的话可以直接去了解一下插件:http://immmmm.com/slimbox2-for-wordpress.html

48,543
更新日期: 2011-02-16
文章标签: ,,
文章链接: http://www.xishao.net/wp/588.html
站方声明: 除特别标注, 本站所有文章均为原创, 互联分享, 尊重版权, 转载请注明.