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 info 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 called dynamically using links i.e., iframes, videos, images.
  • 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.
  • Manual (links) – You can set up one lightbox element to be used with multiple links on the page. The href of the links will determine what content appears inside of the lightbox. If the links point to image URLs, when clicked the lightbox will show those images. If lots of links, they can be displayed inside of a gallery by enabling “grouping” so the user can flick between each one.
  • Gallery (new) – You can choose a selection of images from the media library (or by using dynamic data) to populate the lightbox. Make sure to enable ‘grouping’ to allow for swiping across the multiple images. Similar to when using iframes, add the element(s) inside of the lightbox structure that you want the user to click to open.

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. These elements aren’t links by default.

Adding custom close button

There’s always a close button at the top right of the viewport when the lightbox is opened, but you may wish to also add a custom close button inside of the lightbox content if nesting elements inside.

You can do this by adding the attribute data-x-lightbox-close to any element inside of the lightbox. Clicking that element will then close the lightbox.

There’s also the option to enable “hash link to close” meaning that if a hashlink is clicked inside of the ligthbox (like inside of a menu that scrolls the user to a specific part of the page) then the lightbox will close.

Using the iFrame or Gallery Options

When using the iframe or gallery 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 settings. Simply wrap the lightbox around the button/image/heading or whatever element you want the user to click to open up the lightbox.

Example 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 as set in the settings (either the iframe URL or the images from your gallery). The dynamic lightbox element is acting more like a link wrapper here, providing the clickable link to open up the content.

Using the Manual (links) Option

It won’t matter where the actual lightbox is positoned on the page, it could be inside of a template or just on the page where you need it. The job of “manual” mode is that you’re telling the ligthbox to look for certain links on that page where it exists (links that match the selector that you provide).

The lightbox will dynamically load up the content that it finds from those links (from the href attribute). If the links are pointing to Youtube video URLs, it will popup a Youtube video when clicked. For images, the image will be displayed and for a page URL, the page will be displayed inside of an iFrame.

The width of the lightbox content will be depentant on the “content width” setting. There’s also a specific video width and image width setting, to allow you to customize these separately. For example, you may wish for the iFrame to appear quite large but limit any videos to have a specific max width.

Live Demo and 1-click Copy code.

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.

The lightbox isn’t working when using WPGridbuilder facets – WPGB requires code to be added to make sure that interactive elements like lightboxes will work the same when WPGB adds them to the page, as if they were there when the page loaded. Refer to our tutorial/snippet on how to add.


Developer Docs

The dynamic lightbox element is powered by GLightbox. If you’re needing to control the lightbox programmatically using GLightbox’s methods, you need to get the GLightbox instance like this..

First, find the identifier on your lightbox element, it’s the value of the attribute ‘data-x-id’.

So for eg, if the lightbox has the attribute ‘data-x-id=bfcads’, then you’d get the instance like this..

const myLightbox = xDynamicLightbox.Instances.bfcads

Now we can control using any of the methods built into GLightbox..

myLightbox.nextSlide(); // Go to next slide
myLightbox.close(); // Close the lightbox

Events

If you’re needing to run code when any lightbox opens/closes on the page. There are two events x_lightbox:open and x_lightbox:close.

Eg..

document.querySelectorAll('.brxe-xdynamiclightbox').forEach((lightbox) => {

    lightbox.addEventListener('x_lightbox:open', function() {
        /* do something here when lightbox opens */
    })

    lightbox.addEventListener('x_lightbox:close', function() {
        /* do something here when lightbox closes */
    })
    
})

1-Click Copy Sections

Dynamic Posts Lightbox on BricksSections.com.