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.

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>