Dynamic Galleries with Thumbnails and Captions in Lightbox using lightGallery in Bricks

Updated on 19 Apr 2024

This Pro tutorial provides the steps to load and initialize lightGallery on the images coming from a Gallery type of ACF field or an Image Advanced type of Meta Box field and being output using a Posts → Media Bricks query loop for a dynamic thumbnail gallery with support for thumbnails and captions inside the lightbox.

Note: The video was recorded before making a settings change to load the images in the correct order.

Step 1

Create a field group for your desired post type having a 'Gallery' type of field with ACF or an 'Image Advanced' type of field with Meta Box.

Meta Box screenshots:

Step 2

Edit your posts and upload/select images for your field.

Step 3

Edit your Page/template with Bricks and add a Section.

Inside the Section's Container, add a Container.

Change its HTML tag to ul.

Display: grid

Gap: 1em

Grid template columns: repeat(3, minmax(0, 1fr))

In the STYLE tab, go to CSS control group and add this class: lightgallery

Add a Block inside having a HTML tag of li and set Display to block.

Enable query loop.

Post type: Media