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>
