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.

Keep up to date with new tutorials, information on new features & example use cases.