Lightbox JavaScript Image Viewer

News Section - Lightbox JavaScript Image Viewer

Developer Blog from Mike Irving - Lightbox JavaScript Image Viewer

I seem to have been increasingly using the Lightbox Photo Viewer on websites in recent times.

Lightbox is a light-weight, and cross-platform, solution for opening up full-size images within the current browser window.

This is good as we don't need to bombard the user with popup-windows when they want to view images, and also prevents our image links being blocked by popup-blockers, such as the one in the Google Toolbar.

It is easy to implement, simply add rel="lightbox" to your A Tag.

Use the A Tag's title attribute to set a caption for the image.

For example:
a href="/images/an-image.jpg" title="an image" rel="lightbox"

By taking this approach, not only is implementation easy, but it is good for Search Engines and SEO because you are still technically linking to the full original image.

Should JavaScript be disabled, or unavailable, the image link will still work too. True, they'll be no "Lightbox" effect, but the user will still be able to click to the image they desire.

Lightbox supports collections of images too. Simply use square brackets to specify collection image sets, i.e. add rel="lightbox[myimages]" to all your image links. This will allow the user to user "Prev" and "Next" buttons to scroll through your images in Lightbox. Left and Right keystrokes are also supported, and pressing Escape will close Lightbox.

I have been very impressed by this piece of software, and will no doubt be using it in future web projects.

Information on Lightbox at Wikipedia