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.
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.
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.
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.
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;
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.