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:

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.

WPGridBuilder has recently added further support for Oxygen by adding some new components for adding both Facet’s & Grids. It means we no longer need to add shortcodes and makes it a bit more convenient to work when inside the builder, especially when using together with Repeaters or Easy Posts.

WPGridBuilder with Repeaters

If you’re using a repeater for your posts and using WPGridBuilder to filter and add more posts, one thing you may notice is that if you’re adding some dynamic Oxygen components that use JS inside of the repeater or are adding your own with code blocks, the new content that is appended onto the page may not pick up the same functionality. You may need to adapt your code slightly to account for new elements that didn’t exist on the page when the page first loaded.

This is the case with both the Lightbox & the Read More / Less components.

WPGridBuilder documentation provides JS events that trigger when specific things occur. We can use the event ‘appended’ to listen for when the facets have been used to append new content inside the repeater and make surer these components function as they’re supposed to.

Support for Lightboxes & Read More components

You can add the following code to a code block. (Make sure the code block isn’t actually inside of the repeater that WPGridBuilder is using)..

window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );

function onInit( wpgb ) {
    wpgb.facets.on( 'appended', onAppended );

function onAppended( content ) {
    /* Lightbox */
    if (typeof doExtrasLightbox == 'function') {
    /* Read More / Less */
    if (typeof doExtrasReadmore == 'function') {

Should this just be built-in?

If WPGridbuilder starts to gain a lot of popularity for OxyExtras users (they’re currently offering Oxygen users a discount for their LTD), it may be a good idea in the future to add support for it out of the box. For now, as there are a few different methods for adding Oxygen components to a page dynamically, the priority was to make sure there was a way to use these components in AJAX loaded content regardless of which method you’re using.

These two new functions doExtrasLightbox($content) and doExtrasReadmore($content) provide a way to do that. You just need to pass the new AJAX-loaded content as the parameter ($content).


Where you add this will depend on the plugin you’re using to add the content, you’d need to refer to the plugin documentation.

Note – if you’re using our own Infinite Scroller component, then this is already working out of the box.