Lightbox, a favorite technique for presenting image galleries, has been with us for more than 10 years. Click on an image and it is displayed in a large modal overlay with controls to step through other images in the same gallery. Although some pure CSS experiments have been attempted, the most dominant and versatile approach is still to use good old JavaScript. Over the years, many libraries have been created to automate lightbox creation, and it can be hard to choose between them. One of the best is Colorbox by Jack Moore.

Colorbox is written as a jQuery plugin. The most common usage is to display a set of images as a single gallery. The rel attribute provided to the colorbox method is used as a namespace; all images registered with the appropriate value will be connected by next/previous links inside the lightbox.

$("a.gallery").colorbox({rel:"group1"});

Even for such a simple case, Colorbox is quite flexible. You can call the colorbox method later with the same rel on another image set, which will append the new images to the existing group. Or you can hide all links except one using CSS, and name the visible link "Show Gallery" or something similar. This will make the images browsable within the lightbox even though they are not visible on the page itself.

As long as you just have thumbnails pointing to full-sized images, you will be probably be satisfied with any number of other lightbox libraries. Where Colorbox shines is in providing options to fullfil more specific needs. For example, you can reference an image set from a separate HTML file:

$.colorbox({href:"dialog.html"});

Or you can create lightbox content on the fly:

$.colorbox({html:"<h1>Hello</h1>"});

Another great feature is the option to trigger actions programmatically:

$.colorbox.close()

You can also hook into actions triggered by user:

$("a.imglink").colorbox({onClosed: function() {...}})

With well-written documentation and a rich JavaScript API, Colorbox gives you fine-grained control with the possibility to easily override almost anything if you aren't happy with the default behavior.