The Widgetkit Lightbox allows you to view images on a dark dimmed overlay without having to leave the current page.

Examples

Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:

Optional: Add a title attribute if you want to show a caption.

<a href="img/image1.jpg" data-lightbox="image1" title="My caption"><img src="img/image1.jpg"/></a>

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:

<a href="img/image1.jpg" data-lightbox="home" title="My saloon"><img src="img/image1.jpg"/></a>
<a href="img/image2.jpg" data-lightbox="home" title="My garden"><img src="img/image2.jpg"/></a>
<a href="img/image3.jpg" data-lightbox="home" title="My sofa"><img src="img/image3.jpg"/></a>