I usually try to avoid falling in love with shiny new web effects, but with Lightbox I couldn’t help it. I hope this effect doesn’t get overused too soon, because I really like it.

I’ve spent a lot of time looking for a nice-looking, easy to use, user-friendly slideshow script. I haven’t found much until now–Lightbox has it all. It’s based on the prototype framework and Scriptaculous AJAX effects library, but you don’t even have to know that to implement it.

Here’s an example:

The instructions are short and sweet:

1. Upload a small set of files to your webserver (.js files, a .css file, and some images). Files are here.
2. Anywhere in the page, add 4 lines of code that reference the three Javascript files and one CSS file.
3. Add a thumbnail image to your web page. Link this image to a larger version. Inside the anchor tag, add the following:
   rel=”lightbox”
4. For an image series, add the following to the anchor tag for each image in the series:
   rel=”lightbox[name-of-series]”
   Each image should have the same series name. When the viewer holds the mouse over the image, a navigation button will appear (Previous on left, Next on right).

I’ve put up a longer slideshow example here.