Lightbox component of OxyExtras has different possible content sources one of which is “Inline (elements on current page)”.
In this article we shall see how a trigger (can be any element like a button, image etc.) can be set to open a lightbox when clicked with the lightbox content being an element that is hidden on the page.
Inline has two options:
- Display elements inside the lightbox
- Another element on page
Here we are covering the “Another element on page” option.
By the end of this tutorial your structure should be like this:
In the Oxygen editor, add a Section.
Add a Div. This is the container that holds the lightbox content.
In this example, you can add Heading and Text components.
Under Advanced → Layout, set the Display to none.
Add a Lightbox at the same level as the earlier Div.
Lightbox content: Inline (elements on current page)
Inline content: Another element on page
Element selector: (ID or class of the hidden Div)
Add a button or image or any other component that you wish to use as the trigger that should launch the lightbox.
That’s it.
