Updated on 7 Nov 2022
This Pro tutorial provides the steps to set up a dynamic lightbox using Bricks' query loop with featured images and post titles opening a lightbox having the title, image and excerpt using GLightbox.
When the lightbox is open the previous and next post's lightbox content can be accessed using either the left and right arrows or by pressing ← and → keys. Also, the lightbox can be closed by clicking the x icon or pressing the Esc key.
Needless to say, we have complete control w.r.t the trigger i.e., what should be clicked to open the lightbox and what is shown in the lightbox i.e., the lightbox content.
Note
The post-specific info shown in the lightbox is not fetched using AJAX on-demand, but rather present as a hidden div for each post.
Step 1
Edit your Template/Page with Bricks.
Add a Section and inside the Section's Container, a Block.
This Block is going to be the parent element of posts.
Add this in the Custom CSS area to arrange the posts using CSS Grid:
root {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 40px;
grid-row-gap: 60px;
}Add a Div/Block inside the above Block.
Enable query loop on this Div.
Click the query icon and select your desired post type. This step is not needed if you are working with a page where the main query already contains a bunch of posts like the Posts page (blog posts index) or an archive template.
Add your desired trigger content inside the above Div. Ex.: Post Title element and Image element. Do NOT set these individual elements to be hyperlinks.
Add a Block (labelled "Lightbox Content" in the screenshot below) and add your desired lightbox content inside.
Note: Styling for the elements that make up the lightbox content attached to the IDs is not going to remain/work inside the lightbox. Therefore, ensure that any styling is done using classes for them.
In this example I've given the bottom Image element a class of lightbox-posts__lightbox-image and set a top and bottom margin for it.
Once you are done setting up your Lightbox Content, set its Display to none.
