Dynamic Lightbox

This element allows you to build dynamic, content lightboxes visually in Bricks. The contents of the lightbox can be populated with any elements and, if used inside a query loop, can be used with dynamic data to pull the content from each post. Ideal for adding ‘view more’ buttons for showing more post content inside post loops.

Walkthrough video

Here we show how to create ‘dynamic content’ lightboxes where the post into can be displayed when the user clicks links inside of query loops.

Differences to the Modal Element

The dynamic lightbox element also reveals content in a popup, similar to the modal element, but is different to the modal in a number of ways..

  • Built specifically to support being used inside post loops, where the content can use dynamic data from each post using Bricks dynamic tags and data.
  • Supports grouping, meaning the user can swipe left/right between multiple lightboxes.
  • Allows for fetching content dynamically when loaded, ie iframes, videos, images – coming soon.
  • Is always revealed via click, not designed to be used as a modal that appears due to different triggers.

Setting up the Lightbox

Lightbox content – At time of writing, the available options are..

  • Nest elements – you can add any elements inside the lightbox container to design the layout.
  • iFrame – Content from other URLs can be loaded dynamically inside the lightbox. If showing another URL on the same domain, you can choose to only show part of the page. For eg just one section, by just providing the selector of that section.

Link selector – Provide the selector for the link that the user will need to click to open up the lightbox. Note that this needs to be a link, if you are using a button or image element, set it to be a link in the element settings.

Using the iFrame Option

When using the iframe option, the process is the opposite way around than when filling in the contents with elements. This time the content is going to be dynamically fetched from the URL inside of the settings. Simple wrap the lightbox around the button/image/heading or whatever element you want the user to click to open up the lightbox.

eg structure below. Here the image inside of the lightbox element will appear inline on the page and when clicked the lightbox will open showing the contents of the iFrame. The dynamic lightbox element is acting more like a link wrapper here, providing the clickable link to open up the content.

Styling the Lightbox

The important thing about styling the lightbox is to always use a class, never use the element ID, style everything in the lightbox settings and the elements inside with classes. (this is because the lightbox is appended to the bottom of the page when the content appears, and it uses the classes from the element to transfer the styles), also inside of a post loop the ID’s are removed.

Content height/width – Set the height/width of the content inside of the lightbox. By default the height is auto, so can just be left if you wish for the lightbox to always take the height of the elements inside of it. If there’s going to be a lot of content, then it’s best to set a height so the lightbox can be scrolled.

Grouping

If you’re using the lightbox inside of a query loop, then you have the option to group all of the posts together so that when the user opens up one lightbox, they can navigate forwards/backwards between the different posts. Navigation arrows will appear.

Loop slides on end – If enabled, when the user reaches the last slide it will loop back around to the first slide.

Draggable – Allow the user to drag left/right to navigate (instead of needing to press the arrows). Most of the time this is best enabled, but some examples of when it’s best disabled are..

  • You’ve added a slider or some other draggable element inside of the lightbox, so you want the user to drag that instead of the lightbox.
  • You’re using an animation other than ‘slide’ for the slide effect, such as ‘fade’ where it doesn’t make sense for the user to swipe and see a fade effect.

Slide effect – Set a different animation for when the user is navigating between slides.

Config

Close button – Enable a close button to appear in the top right of the viewport

Click backdrop to close – Enable to allow clicking anywhere outside the lightbox content to close the lightbox

Keyboard Navigation – Enable to allow the user to use the arrow keys to navigate between slides if using grouping.

Styling the UI

The close button and navigation arrows can all be styled here.

Animation

Note – reminder to always use a class, not the element ID.

To change the movement of the lightbox when it opens and closes here you can change both the “start position” and the “end position”.

The start position is the position the lightbox is in before it appears. The end position is the position it moves to as it closes.

You can use the preview options to view the modal in its different positions.

Prefers reduce motion – Choose to limit the animation for users that have reduce motion set in their browser.


Support FAQ

When i’m clicking the link selector, the lightbox is opening but no content is showing – Make sure the selector you’re giving is actually a link. If using a button element, it needs to be set as a link in the button settings, the same for images.

The styles aren’t being applied when I save – All styling needs to be done with classes on elements, not IDs (this includes elements inside of the lightbox if being used inside of a query loop).

How to set the link for the lightbox if showing an iFrame? – You don’t need to set a link, instead place the element you want the user to click inside of the lightbox element in the structure panel.