Lightbox Images

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Stack's modular elements
at the Element Index Page ?

Lightbox Image

Stack features the lightbox plugin which allows you to display an image thumbnail, that when clicked, opens to a larger version of the same image. This is especially useful when displaying image galleries.

The lightbox image works by wrapping a thumbnail <img> tag inside an <a> element with the data attribute data-lightbox="true"

<a href="img/fullsize.jpg" data-lightbox="true">
	<img alt="Thumb" src="img/thumb.jpg" />
</a>

Lightbox Galleries

You can easily create a gallery of lightbox images by changing the data-lightbox="" attribute to the same name. For example data-lightbox="Gallery 1"

<a href="img/fullsize.jpg" data-lightbox="Gallery 1">
	<img alt="Thumb" src="img/thumb.jpg" />
</a>
<a href="img/fullsize.jpg" data-lightbox="Gallery 1">
	<img alt="Thumb" src="img/thumb.jpg" />
</a>
<a href="img/fullsize.jpg" data-lightbox="Gallery 1">
	<img alt="Thumb" src="img/thumb.jpg" />
</a>