Lightbox2 - How to add a lightbox to images

Demo site: http://www.stellapower.net/lightbox2

Adding a basic lightbox

Adding a lightbox to your images couldn't be easier. Just add rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[][my caption]">image #1</a>

Optional: To show a caption either use the title attribute or put in the second set of [] of the rel attribute.

Grouping images

If you have a set of related images that you would like to group, then you will need to include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>

There are no limits to the number of image sets per page or how many images are allowed in each set.

If you have a set of images that you would like to group together in a lightbox, but only wish for one of these images to be visible on your page, you can assign the "lightbox_hide_image" class to hide the additional images. This is not available in the 4.7.x version but should be easy to reproduce. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #3</a>

Turning the caption into a link

If you wish to turn the caption into a link, format your caption in the following way:

<a href="images/image-1.jpg" rel='lightbox[][<a href="http://www.yourlink.com">View Image Details</a>]'>image #1</a>