When you are making a page with thumbnails of photos in it, don't take the shortcut of just linking the thumbnails to the larger-sized images by making them open in a popup window, or even worse, a new browser window with use of target="_blank" — ugh! We're better than this, aren't we?

Instead, learn how to use this unobtrusive, Javascript image popup script called Lightbox. You've probably seen something like this used, and were happy when a new tab or browser window didn't open when you clicked on that thumbnail! Because you love the way I write, and would never visit another blog (or even the Lightbox creator's website) to learn how to do this, I'm going to walk you through it.

Lightbox is pretty

Download the necessary files

As you'd expect, we need to first head over to the Lightbox website and download the latest version of the scripts, images and stylesheets. One nice thing is that Lightbox looks very good right out-of-the-box, without any configuration. Of course, you are able to change all the styles and images used, but the defaults are more than adequate.

Lightbox comes with all of the dependent Javascript libraries that you'll need, including Prototype and Scriptaculous.

Include the Javascript libraries and Stylesheet

First, include the Javascript and CSS files in the head of the page you are going to use Lightbox on. Make sure to avoid adding any libraries more than once, if you already happen to have Prototype or Scriptaculous included side-wide on your website. Also, make sure to adjust the paths below to be relevant, mattering where you have put the Lightbox files on your server.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>

Tell your images to to use Lightbox

All you need to do is set the rel attribute of your a tag to the value lightbox, like so:

<a href="images/image-1.jpg" rel="lightbox" title="the eiffel tower"><img .../></a>

The title attribute is used for the photo's caption, if provided. If you have multiple images, and want to enable the Prev/Next buttons (which can also be used with the left and right arrow-keys), simply add the name of the gallery in brackets to the value of rel, like this:

<a href="images/image-1.jpg" rel="lightbox[paris]" title="the eiffel tower"><img .../></a>
<a href="images/image-2.jpg" rel="lightbox[paris]" title="louvre auditorium"><img .../></a>
<a href="images/image-3.jpg" rel="lightbox[paris]" title="arc de triomphe"><img .../></a>

Optional tweaks

Basically, your photo galleries are awesome now. If you're not satisfied with the default look of Lightbox, simply open up your favorite image manipulation program and have at the images in the images folder. There are icons for the previous, next and close buttons, among others. I find the default animation speed to be too slow for my tastes. You can edit the animation settings by looking at the top of lightbox.js. These are the relevant lines:

overlayOpacity: 0.8,   // controls transparency of shadow overlay
animate: true,         // toggles resizing animations
resizeSpeed: 8,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)
borderSize: 5,         //if you adjust the padding in the CSS, you will need to update this variable

If I had to explain each one of these, those author comments would be kind of a waste, huh? I wish you luck in ever wanting to have thumbnail images load in a new browser window again. Lightbox, like many things that improve the look and functionality of your website with such little work, is very addictive.