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

方法：

1. 既然是jquery特效当然要jquery库文件了，当然如果你的主题中有的话，这一步就可以省略了

<script type=”text/javascript” src=”http://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.4.4/jquery.min.js”></script>

2. 下载 js 文件 slimbox.zip（见本文底部），用文本工具对其中的 slimbox.js 文件进行编辑，找到代码：

$(“.post-content a:has(img)”).slimbox();

将其中的 .post 改成 single.php 文件中包围 <?php the_content();?> 代码的 CSS 样式，如：

<div class=”entry”><?php the_content();?></div>

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

3. 把修改好的 js 文件上传至当前主题的目录下，然后在 footer.php 中添加 js 调用代码：

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

该代码表示，当访问的页面是 single.php 页面时，图片就使用 lightbox 特效

4. 把下载的压缩包里的图片上传至当前主题目录的 images 目录中,没有就创建一个.然后在 style.css 文件末端添加以下 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;}

5. OK，大功告成。slimbox.zip 文件下载