This component allows you to build dynamic lightboxes visually in Zion Builder. The contents of the lightbox can be populated with any elements and, if used inside a repeater consumer, can be used with dynamic data.

We can also add iFrames inside of the lightbox, to show specific parts of other pages or posts.

Video showing using lightbox with repeaters

This short video shows how the lightbox element can be used to display dynamic data from custom post types & custom fields. Similar to a modal where the user clicks to reveal, but the content is dynamic.

Inline Elements

The first lightbox content option is ‘inline elements’. This allows you to use the lightbox similar to a modal, where you are adding your own elements inside of the lightbox itself and then choose a ‘click selector’ in the settings to set the element that you want the user to click in order to reveal the lightbox.

Iframe

With the iframe option, the setup is the other way around, this time you’re not adding elements into the lightbox to appear. Instead, the actual content of the lightbox will be dynamic. You set the URL of which page to display inside of the lightbox ( and choose a selector if you just want to show a container and don’t want to show the whole page ).

With the iFrame option, instead of choosing a click selector for the user to click an element to reveal it. You instead place the element inside of the lightbox in the structure panel. This will then turn wrap that element with a link that will open up the lightbox when clicked.

Custom (using links)

Setting the lightbox content to ‘custom’ allows you to attach lightboxes to any links on the page. This can be links inside gutenberg content, other 3rd party elements or links you’re adding yourself on Zion Builder pages.

The few things that are needed are;

• The links need to exist on the page somewhere, with the value of the href attribute being the image, video or page URL that needs to display inside of the lightbox when clicked.
• The ‘link selector’ inside the lightbox settings needs to correctly target the links. The simplest way to do this is to add a class to all of the links, and then use that class as the link selector. If you want to target all links inside of a container, then giving a class to the container and targeting with ‘.my-container-class a’ will ensure all the links are found.
• Force content type – if the links are links to other pages, and not just images or videos, then you’ll need to tell the lightbox whether to open the page via an iframe or to grab the content from the page via AJAX. iFrame is recommended if you some functionality from the selected page to work inside of the lightbox. As AJAX will just fetch the HTML only (best used for text and images and simple content).

Group Items

Enable group items to allow multiple items to appear inside of the same lightbox. For eg you have one lightbox that is being used for lots of links, or are using with dynamic content inside of a repeater, you may want the user to be able to click left/right to browser between each one when the lightbox is still open. The prev/next arrows are stylable from the styling tab.