This tutorial provides the steps to set up a carousel with dynamic post-specific content in a lightbox using OxyExtras.

We shall set up a text link inside an Oxygen Builder‘s Repeater which when clicked displays the post title and the value of a custom field inside a Lightbox for that item (post) in the carousel.

OxyExtras components used: Carousel Builder, Lightbox.

By the end of this tutorial your page’s structure should be something like this:

In the Oxygen editor, add a Section.

If you have not already, enable Carousel Builder and Lightbox in OxyExtras’ settings.

Add a Carousel Builder inside the Section.

Settings from our test page:

Add a Repeater component inside the Carousel Builder.

Set your desired query.

In our test site, it is “custom” with post Post Type and 10 Posts per page.

While it is not necessary, let’s add a Div inside the Repeater’s Div as a container for the elements that we wish to be shown for each carousel item.

In our test site, we added the post’s featured image and post title. You could link them to the post’s permalink if you wish.

Let’s add the lightbox trigger. Add a Text Link component inside the above Div (if it is NOT set as a link) or outside the above Div (if it is set as a link).

Set the link text to something like “Show more info”.

Give it a class of say, open-lightbox.

Set the URL to:

#post-[oxygen data='phpfunction' function='get_the_ID']

We are setting the value of the href attribute to # followed by post- and the ID of the post.

Add a Div alongside the above Div as the container for elements that we want to appear inside the Lightbox i.e., post-specific data.

We need to have the ID of this Div to be post- followed by the post ID so that clicking the lightbox trigger will show this Div inside the Lightbox for each carousel item. Since Oxygen automatically assigns an auto-generated ID to every element, we would need to come up with a workaround to replace this auto-generated ID with the dynamic post ID in the required format.

Add the following snippet using a plugin like Code Snippets on the front-end:

Title: Dynamic post ID

Code:

<?php

function wpdd_get_post_id() {
    return 'post-' . get_the_ID();
}

Back in the Oxygen editor, select the Lightbox Content Div → Advanced → Attributes → Add Attribute.

name: data-id
value: [oxygen data='phpfunction' function='wpdd_get_post_id']

Add your desired post-specific info inside the above Div. In our test page, we added the post title and a custom field (set using ACF) value.

Let’s add a bit of jQuery that will loop through all DOM elements that have data-id attribute, then grab that attribute’s value and set it as the value of ID attribute.

Add a Code Block (this could be anywhere in the structure – we added it inside the Repeater’s Div as the last item).

PHP & HTML:

<?php
	// echo "hello world!";
?>

CSS:

body:not(.oxygen-builder-body) [data-id] {
	display: none;
}

JavaScript:

jQuery(document).ready(function($){
	if($('html').attr('ng-app') == 'CTFrontendBuilder') return;
	
	$('[data-id]').each(function(){
		$(this).prop('id', $(this).attr('data-id') );
	});
});

Select the Section containing the Carousel Builder and add a Lightbox component so it is at the same level as or adjacent to the Carousel Builder.

Lightbox content: Manual (using links)

Link Selector: .open-lightbox

and we are done!

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

Subscribe