Lightbox2 - a fancy option for overlaying enlarged images over the layout.

I know it's vergeing on overdone, but I still like using lightbox2 when there's a requirement for something a bit fancy to display enlarged images. For anyone that hasn't already read about lightbox2, it's a script by Lokesh Dhakar that can be found and downloaded at huddletogether.com. If you read on, I've also got a description of how to set it up on this page.

The lightbox2 package consists of three javascript files, one css file and several images. You can download them here.

The download holds all the files within three folders. Simply copy the folders into the root directory of your site and insert the following code into the <head> of any page you want to use lightbox on:

<!-- Lightbox stylesheet & js --->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- Lightbox stylesheet & js end --->

You don't need the  but it can be handy when you have alot of things linked in the <head>. Comments you DO need to leave are the ones in the javascript files that link to the author. It's licensed under the Creative Commons Attribution 2.5 License so there's not much else required of you if you want to use the script in pretty much any way. If in doubt, read the license. It's only a couple of paragraphs long.

The only other thing you need to do is insert the following code in the anchor that links to the large image:

rel="lightbox[page]"

so a link on your page might look like this:

<a href="fullsize.jpg" rel="lightbox[page]"><img src="thumbnail.jpg" /></a>

There are a few swanky features that might
be worth noting here.

Image sets: if you use rel="lightbox[page]", your images will be grouped, so that a "next" button appears within the lightbox overlay and clicking on it takes you to the next image within the slideshow. Removing the [page] so that you just have rel="lightbox" will disable the grouping feature, which is sometimes desirable depending on the application.
Captions: you can caption your images by adding a title="" attribute to the <a>. So you'd have something like:

<a href="image.jpg" rel="lightbox" title="your caption here">link</a>

Tips on using lightbox

In addition to the brief guide above, I thought I'd include a few things I've noticed that might be of use when setting lightbox:

In order to help keep things accessible for users with javascript turned off, try and avoid situations where you have a single link that opens an image group with multiple images. In other words, make sure all your overlay images have clearly visible links on the page so that visitors don't have to rely on the navigation within the lightbox to see all the images. I've made this mistake once before, and although it's a small percentage of the market that do have javascript turned off, my client was one of them.
Like all javascript, lightbox doesn't load until everything else on the page has loaded. This means that clicking on the lightbox-activated links before all the elements on the page have finished loading will mean the link will be treated as an un-activated one, and just take you to the url of the image. To minimise this effect, I avoid using lightbox on large pages with long loading times, such as forms or image galleries that have alot of images in them.
I've seen alot of customised lightboxes in my time. Although I haven't had a project that's called for me to customise lightbox, it's worth noting that the visual appearance can be changed a great deal if necessary.
You can have multiple separate image groups on a single page - just replace the rel="lighbox[page]" with rel="lighbox[unique values for each individual group]". Try and come up with something that will make the group easily identifiable.
The author's site, huddletogether.com, has other useful tips, so if you can't find what you're looking for here, try there.

Lightbox2 - a fancy option for overlaying enlarged images over the layout.

There are a few swanky features that might be worth noting here.

Tips on using lightbox

More...

There are a few swanky features that might
be worth noting here.