Example

Click on an image, below to see the jQuery lightBox plugin in action.

Here are three galleries that are showing a lightbox, setup with a single javascript call. The first two galleries are "self-contained", not showing the images in the other one, by using rel="lightbox[NAME]", where NAME is a unique alphanumeric value for each gallery, set on each anchor element.

Note: If you've got, even a single image, wrapped in an anchor element with NO rel tag, but there are, within the same page, galleries WITH a rel tag, then that single image will expose all images, provided by the query, within a single lightbox. See Gallery 3 for an example.

Here are the same three galleries as on the left hand side, but these are initialised with three different javascript calls to the lightbox plugin, thus removing the problematic case (and actual need) of the rel tag.

Note: The downside to this approach is the several javascript calls to query elements and setup the lightboxes.

Gallery 1

Gallery 2

Gallery 3


$('.galleries-set1 .gallery a').lightBox();

Gallery 4

Gallery 5

Gallery 6


$('#gallery4 a').lightBox();
$('#gallery5 a').lightBox();
$('#gallery6 a').lightBox();

Changelog:

2014.05 -- Add example how to use multiple groups on a single page, simultaneously.

2011.08 -- Add rel="lightbox[groupName]" tag to group images; Add shrinkToFit setting to shrink images to fit the viewport.