Gallery

The Gallery component displays images in a thumbnail grid. When a thumbnail is clicked, the image is enlarged and can be scrolled through to view images one after another. Publishers may also add captions to images, which will be displayed beneath the enlarged images.

HTML

   <div class="qg-image-gallery">
       <ul>
            <li><a title="caption 1" data-fancybox="gallery-92732" data-caption="caption 1"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a>
            </li>
            <li><a title="caption 2" data-fancybox="gallery-92732" data-caption="caption 2"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a>
            </li>
            <li><a title="caption 3" data-fancybox="gallery-92732" data-caption="caption 3"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a>
            </li>
            <li><a title="caption 4" data-fancybox="gallery-92732" data-caption="caption 4"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a>
            </li>
            <li><a title="caption 5" data-fancybox="gallery-92732" data-caption="caption 5"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a>
            </li>
            <li><a title="caption 6" data-fancybox="gallery-92732" data-caption="caption 6"
                   href="https://placehold.co/450"><img alt="" src="https://placehold.co/150"></a></li>
       </ul>
   </div>