Here’s a tutorial on implementing the image lightbox effect in WordPress without plugins. The lightbox effect is used on countless blogs, so let’s learn how to set it up.

Method:

1. Since this is a jQuery effect, you’ll need the jQuery library. Of course, if your theme already includes it, you can skip this step.

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

2. Download the slimbox.zip file (see the bottom of this article). Edit the slimbox.js file with a text editor and find this code:

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

Change .post to match the CSS class that wraps <?php the_content();?> in your single.php file. For example:

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

Then change .post-content to .entry.

3. Upload the modified JS files to your current theme directory, then add the JS reference in footer.php:

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

This code means the lightbox effect will only apply when viewing a single.php page.

4. Upload the images from the downloaded zip file to the images directory of your current theme (create the directory if it doesn’t exist). Then add the following CSS to the end of your style.css file:

/*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. Done! Download slimbox.zip