Make image open in lightbox in Divi

Jun 27, 2018 | Divi Tips | 5 comments

Say you added an image in the text editor and want it to open in a lightbox popup.

In the editor make the image you placed there a link and link it to itself.

Then, paste the following class into the HREF tag (not the image tag).

class=”et_pb_lightbox_image”

So, your link will look something like this:

<a href="https://www.embryodesign.com/wp-content/uploads/2018/06/divi-tip.gif" class="et_pb_lightbox_image"><img src="https://www.embryodesign.com/wp-content/uploads/2018/06/divi-tip-150x150.gif" alt="" class="alignnone size-thumbnail wp-image-30280" width="150" height="150"></a>

Click the image below to see it work.

5 Comments

  1. This no longer works Divi v. 4.9.2 WP v. 5.7 🙁

  2. Hi Paka,
    It’s still working on the image above and the site is on Divi v. 4.9.2 and WP v. 5.7.

  3. Hi, I’ve added the et_pb_lightbox_image class to a button and it works almost perfect for me, but after closing the lightbox it won’t reopen. Do you know why this is?

    Example
    vultostore.levelupwebdesign.nl/product/herringbone-alpaca-coat-2/

  4. This Divi Tip helped me figure my problem out. Thank you.
    Also you don’t need to add a plug-in, and it should be future-proof because it uses a class.

    This works great for images inserted in text – for instance in a blog post. I didn’t want clients to have to use the Divi Builder for blog posts, but I wanted the images inserted in posts using the text editor to open in a lightbox.
    For images inserted in a blog post:
    1. Insert image in text using the button “add Media”
    2. click on image – a small pop up will appear with positioning icons and a pencil icon (edit). Click on the pencil icon.
    3. a dialog box will appear with “image details”. Here you can fill in alt text, caption, alignment etc. Under “Link To” choose “Media File”
    4. Choose also “Advanced options” dropdown, and here after “Link CSS Class” write “et_pb_lightbox_image” (without the quotation marks)

  5. Would there be any way to get multiple images posted through the text or code editor to open in the same lightbox so one could advance through a gallery of images rather than loading one at a time? There’s Javascript out there for grouping individual Divi Image module images to a single lightbox through CSS classes. Am hoping to find something similar for images through text or code modules.

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.