How To Add An Overlay To a Divi Gallery Slider To Open a Lightbox of Many Pictures

Scenario: You have a store that sells rocks. You want to display each type of rock on a page in grid view. When you click on the thumbnail picture, you want it to open a lightbox that allows you to scroll or swipe horizontally through the images that pertain to that type of rock.

The way Divi is built out of the box is that if you use the portfolio module, you can click on each rock, but instead of opening up a lightbox, it opens up another page that is in a grid view, and if you click on one of those pictures, it opens a lightbox where it loads those pictures on the grid page. If you use the gallery module for each rock, it does open a lightbox that includes each image for that rock. But, on the main page, where you have each rock in a grid, you have to set each rock’s gallery module to slider, so that it only shows one thumbnail, but then you have things like arrows and bullets and an automatic slideshow to contend with.

So, how do you get a simple page that is set up as a grid view and be able to click on each thumbnail to open a lightbox? The solution is to use the gallery module for each rock with a bit of customization.

Step 1:

Use the gallery module for each type of product. For example, you have the category of “rubber”. Each option (black, red, green, blue, brown, etc.) will have it’s own gallery module which you will put on a page where each row will have 3 -4 of these modules.

Step 2:

Each gallery module will have the following settings:

a. Add your images to the gallery images.
b. Layout: slider
c. Show title and Caption: no (or your choice)
d. Show pagination: no (or your choice)
e. Automatic automation: off

Advanced Design Settings and Custom CSS are left alone.

Step 3:

Go to: wp-content/themes/Divi/includes/builder/main-modules.php
Around line #628, you will see…

You will add one line just above the

<img src="%3$s" alt="%2$s" /> 

to look like this:

Step 4:

Go to the WordPress backend ->Divi -> Theme Options. Add the following CSS to the Custom CSS on the General tab:

All done!