非插件实现wordpress图片lightbox效果 | 周良博客

分享一下非插件实现wordpress图片lightbox效果的教程，图片lightbox效果在很多很多博客都用到了，今天就教大家如何来折腾。

方法：

1.既然是jquery特效当然要jquery库文件了，当然如果你的主题中有的话，这一步就可以省略了
[cce_js]<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>[/cce_js]

2.下载js文件slimbox.zip（见本文底部），用文本工具对其中的slimbox.js文件进行编辑，找到代码：
[cce_js]$(“.post-content a:has(img)”).slimbox();[/cce_js]

将其中的.post改成single.php文件中包围<?php the_content();?>代码的css样式，如：
[cce_php]<div class=”entry”><?php the_content();?></div>[/cce_php]

那么就将.post-content改成.entry

3.把修改好的js文件上传至当前主题的目录下，然后在footer.php中添加js调用代码：
[cce_php]
<?php if (is_singular()) { ?>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/slimbox2.js”></script>
<?php } ?>
[/cce_php]
该代码表示，当访问的页面是single.php页面时，图片就使用lightbox特效

4.把下载的压缩包里的图片上传至当前主题目录的images目录中（没有就创建一个），然后在style.css文件末端添加以下css样式代码：

[cce_css]
/*lightbox*/
#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;}
[/cce_css]

5.ok，大功告成。slimbox.zip文件下载   ← 美女壁纸，点击放大！

[raricon href=http://udisk.czkdw.com/myfile/sunwei123/download/slimbox.zip]download slimbox.zip[/raricon]