How To Open A Gallery Lightbox By Clicking Any Button Image Or Link Tutorial by Pee Aye Creative

How To Open A Gallery Lightbox By Clicking Any Button, Image, Or Link

In this tutorial I will show you how to open a Divi gallery in a lightbox by clicking on a button, image, link, or other module.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add And Set Up A Divi Gallery Module

Add The Module And Images

The first step is to place a Divi Gallery module in your layout and add your images.

Hide The Gallery

For this tutorial, we will be hiding the Divi Gallery module from view because we only want to see the images from the gallery opened in a lightbox. So the next step is to hide the module by going to the Divi Gallery settings>Advanced tab>Custom CSS and placing the code “display: none!important;” into the Main Element code box.

hide the Divi gallery from page to open images in lightbox

Add A Custom CSS Class

The last step for the Divi Gallery module is to add a CSS class so that our jQuery code in the next step can target this exact gallery to open the images in a lightbox.

Go to the Gallery module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-gallery” to the CSS Class input field.

add css class to open a Divi gallery from button image or link click

2. Add And Set Up The Trigger Module

Add The Module

Now you need to decide what kind of module or link you want to open the gallery. You could use an image that opens the lightbox, or a button, or any other module. In the video accompanying this tutorial, we will show you an example with both an Image module and a Button module.

Add A Custom CSS Class

The trigger module needs to have a CSS class also. This one is used to designate the module as the click rigger that opens the gallery lightbox. (The screenshot below shows the example using a Button module.)

Go to the module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-gallery-trigger” to the CSS Class input field.

add css class to click trigger open a Divi gallery from button image or link

If you wanted to just is a link within your text you could add the class to the href <a> tag like this:

<a class="pa-gallery-trigger" href="#">Open Gallery From Link</a>

3. Add The jQuery Snippet

The last step is to copy and paste the jQuery snippet below into your site. The code is simply opening the Divi Gallery module whenever you click on the trigger module.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<Script> 
jQuery(document).ready(function(){
        jQuery('.pa-gallery-trigger').click(function(){
        	jQuery('.pa-gallery .et_pb_gallery_item:nth-child(1) img').click();
        });
 });

</Script>

You may notice the :nth-child(1) in the code. This refers to the image that should open as the default image. So in this case, the 1 means the very first image in the gallery, or you could choose any other number to open another image first.

Last updated Feb 2, 2023 @ 12:15 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Andres

    What if I want to add more than 1 gallery in the same page??

    Reply
    • Hemant Gaba

      Hi Andres!

      In that case, please add a new class in the Gallery and new button module. Then add a new script with those classes.

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart