Divi Custom Lightbox

One of the best features in Divi is the ability to open images in a lightbox gallery from within the gallery module. We had already added a lightbox and lightbox gallery option to our popular Divi plugins below:

Divi FilterGrid
Owl Carousel Pro
Portfolio Posts Pro

While lightbox and lightbox gallery are both great features, we knew we could do even better. So we did!

Before we explain what the custom lightbox option is and how it works, let’s first explain what the lightbox and lightbox gallery options are.

Lightbox

When the lightbox option is turned on in any of the plugins above, clicking on the featured image will open the full size version of that image in a lightbox popup window.

Lightbox Gallery

The lightbox gallery option is very similar to the lightbox option with a twist. The featured image will open in a lightbox popup window AND all of the other featured images from the layout can be viewed in the same lightbox window by clicking left and right arrows.

Custom Lightbox

The custom lightbox option works very similar to the lightbox and lightbox gallery but with a bigger twist. Whereas the other two options display images from the featured images of each post in the layout, the custom lightbox option allows you to display custom images for EACH post. Here’s how it works.

In the module’s settings, turn on the Open Custom Lightbox Gallery option. A new input field will appear with the label “Custom Field Name for Images”. Here you will enter the custom field name that contains the array of image URLs. To create a custom field array in WordPress, simply add the same custom field to your post multiple times. WordPress will save the image URL values in an array and our lightbox gallery feature will do the rest!

Now when a featured image is clicked, the images from your custom field will display in the lightbox popup window instead of the featured image. If there is only one image in your custom field, only one image will display in the lightbox. If there are multiple images in your custom field, all of them will display in a lightbox gallery.

We’ve also added a filter in case pulling your images from a custom field isn’t an option. When using the filter, you can pull the images from the post content, custom fields generated by a plugin, or using a custom function. Each plugin has it’s own filter for this:

Divi FilterGrid
Owl Carousel Pro
Portfolio Posts Pro

Below we have added an example of each plugin with the custom lightbox gallery option turned on. In each example, we are using the custom lightbox filter to display the same images when each post is clicked. Notice the images are not related to the featured images of the posts.

In our example, the images are the same for all posts in all three examples but they can be unique for each post. Simply add unique image URLs to the same custom field for each post and our plugins will display a unique lightbox gallery of images for each post.