Image gallery
Overview
The image gallery component displays images in a thumbnail grid. When a thumbnail is clicked, the image is expanded to its larger size in a lightbox. The lightbox can be scrolled through to view images one after another. You may also add captions to images, which are displayed beneath the larger images.
Default
Code
<div class="qg-image-gallery"> <ul> <li><a title="caption 1" data-fancybox="gallery-92732" data-caption="caption 1" href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> </li> <li><a title="caption 2" data-fancybox="gallery-92732" data-caption="caption 2" href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> </li> <li><a title="caption 3" data-fancybox="gallery-92732" data-caption="caption 3" href="https://via.placeholder.com/450g"><img alt="" src="https://via.placeholder.com/150"></a> </li> <li><a title="caption 4" data-fancybox="gallery-92732" data-caption="caption 4" href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> </li> <li><a title="caption 5" data-fancybox="gallery-92732" data-caption="caption 5" href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a> </li> <li><a title="caption 6" data-fancybox="gallery-92732" data-caption="caption 6" href="https://via.placeholder.com/450"><img alt="" src="https://via.placeholder.com/150"></a></li> </ul> </div>