Create a Teams section with a Dynamic Lightbox Pop-up in Oxygen Builder

In this tutorial, I'll show you how to build an advanced team section that opens a lightbox modal with more info in Oxygen Builder.

For this tutorial you need Oxygen Builder, Oxy Extras and ACF. Both are premium plugins but are well worth the price and both are lifetime licenses to use on unlimited websites. You do not need the pro version of ACF to complete this tutorial.

Creating a Custom Post Type and Custom Fields

I'm still getting used to the fact that ACF now lets us create custom post types as well as custom fields. Back in my day we had to use CPTUI or register them from scratch in the theme files.

Anyways. Let's create the backend stuff.

In ACF create a new post type. In our example, since we're building this for a barber shop, my post type is going to be "Barbers".

Next, create a new field group. I'm naming mine Barber Fields.

The following fields can be anything you want but if you want to follow along, here's what I used:

2 things to note - my admin looks different because I installed Adminify to give the client a more friendly interface

You also might be wondering why I included Photo and Name in my fields when the Title and Featured Image would work too and their already there.

That is because I wanted to keep everything in the same spot to avoid confusion. I removed the text area and featured images in the post type using ACF so they don't even see it. It's just a straight form to fill out.

Once you're happy with your fields, go ahead and create a few posts and fill in the fields so that you can have some sample data to use when building out the front end.

Building the teams section with the oxygen builder editor

Here's where Oxy Extras kicks in - we're going to use their lightbox element on top of a repeater in Oxygen.

This tutorial is a modification to their Post-specific Info In Lightbox from Carousel tutorial but in our case, we're making a teams section.

For this tutorial, I won't go into the front end dev and I'll stick to the lightbox functionality.

We need to be able to display the post data from the ACF fields in the lightbox based on whichever barber was clicked.

To do that, we need a trigger css class so we'll nest the contents of our repeater div in a link wrapper then give that link wrapper the class open-lightbox

The URL needs to be set to: #post-

Next Add your lightbox element inside the repeater div. Your HTML structure will look like this

Add a PHP snippet

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

Then in Oxygen edit the Lightbox Attributes tab we need to input some data attributes. To do that go to the advanced tab > select Attributes > click Add New.

For the name input data-id

For the value click data > PHP Return Function > Under Function name put wpdd_get_post_id

Now you can put whatever you want in the lightbox.

This ended up being a pretty easy way to get a dynamic lightbox effect. If you have any questions, please reach out!