Open Image Links in a Lightbox

This post may contain referral links which may earn a commission for this site

If your Divi Theme posts / pages contain links to images, those images will open in their own tab within the browser window. This lets people view your images, but it doesn't look as nice as opening images in a popup lightbox. Fortunately, it is possible to convert images within Divi posts / pages to open in a lightbox. 

Open Image Links in a Lightbox using Divi Lightbox for Images

The free Divi Lightbox for Images plugin enables linked images (i.e. images that are surrounded by a link to an image) to be opened in a lightbox.

Open Image Links in a Lightbox using Divi Booster

Divi Booster includes the option to open image links in a lightbox. It works on both linked images and text links to image files. 

You'll find the option on the Divi Booster settings page at:

Site-wide Settings > Links > Open linked images in a lightbox

NB: In earlier versions of Divi Booster (v2.6.7 – v2.8.6), the feature was located on the Divi Booster settings page at "Posts > Open linked images in a lightbox", and worked on posts only (not pages).

Open Image Links in a Lightbox using jQuery

Here is the jQuery code the Divi Booster uses to make image links open in a lightbox, should you want to manually add it to your site:

<script>
jQuery(function($) {
		var $links = $('.entry-content a').filter(db_is_image_link).not(db_is_gallery_image_link);
		$links.filter(db_has_child_img).addClass('et_pb_lightbox_image'); 
		$links.not(db_has_child_img).magnificPopup({type:'image'});
		
		function db_has_child_img() {
			return ($(this).children('img').length);
		}
		
		function db_is_image_link() {
			return (/.(?:jpg|jpeg|gif|png|bmp)$/i.test($(this).attr('href')));
		}
		
		function db_is_gallery_image_link() {
			return ($(this).parent().hasClass("et_pb_gallery_image")); 
		}
	}
);
</script>

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

20 Comments

  1. Hello, does anyone know a way to have more than one image in a lightbox?

    Reply
    • Hi Alan, one way is to use the Divi gallery module – all the images in the gallery will show up in the lightbox. An alternative, if you have multiple individual image modules on the page and want them to all appear in the same lightbox (as they would if they were part of the same gallery), you can do this:

      https://divibooster.com/open-images-in-lightbox-groups/

      If neither of those will do what you need, perhaps you can share an example of a page where you'd like to have the images shown in the lightbox, or describe in a bit more detail what you want to achieve? Thanks!

      Reply
  2. THANK YOU! All the other "Divi image in lightbox" plugins I tried would not cause images from a Gutenberg-created gallery to open in a lightbox. I did not want to add another lightbox library, just wanted to use whatever Divi is using!

    I purchase Divi Booster almost 5 years ago. Once again, you've came through for my Divi customization needs!

    Reply
    • Glad it helped! 🙂

      Reply
  3. The manual jquery code is awesome. I added it to the theme options and it works like a dream! Thanks, much appreciated.

    Reply
    • You’re welcome, Tina!

      Reply
  4. I cannot get this to work at all! it just links to the attachment page – any ideas?

    Reply
    • Hey Bev, any chance you're able share a link to the page you're working on so that I can take a look? Thanks!

      Reply
  5. It seems like open images in lightbox was broken with this latest update. It had been working on a Divi blurb that linked to an image, but now it does not.

    Reply
    • Hi Jeff, sorry I'm just getting to this. Are you able to share a link to an example page? I just tried on my test site and it's working with the latest Divi Booster and Divi 4. On possibility is that there's a JavaScript error on the page preventing the Divi Booster feature from running – but I should be able to tell you more if I can take a look. Thanks!

      Reply
  6. There does not seem to be an Open linked images in a lightbox option in divi booster any more? Or am I missing something?

    Reply
    • Hey Veikko, it's still in there, but… a while ago I extended the feature to work on pages too (Divi Booster 2.8.7). Since it no longer made sense for it to be located in the "Posts" section of the Divi Booster settings, I moved it to:

      Divi > Divi Booster > Site-wide Settings > Links > Open linked images in a lightbox

      It seems I missed updating the location in this post, however, so my apologies about that. I've updated the post now. Thanks!

      Reply
  7. Hi, i've just purchased your plugin in order to get this feature. I have activated the lightbox option, deleted the cache but it doesn't work.
    A line of text is linked to the image but when I'm clicking on the anchor, it opens the image on its own.
    Thanks

    Reply
    • Hey Christopher, is there any chance you're able to share a link to the page you're working on so that I can take a look at what's going on? Thanks!

      Reply
  8. Thanks! It worked!

    Reply
  9. Hi. Just purchased the Divi Booster. Is there a video on how to use it once the plugin is installed? Not sure what to do.

    Thanks.

    Reply
    • Hi Eugene, I don't have a video on how to use the plugin, I'm afraid. But once the plugin is installed, from your WordPress dashboard go to "Divi > Divi Booster". That will take you to the Divi Booster settings screen which contains most of the settings added by Divi Booster, organized by the section of Divi they act on. To enable a feature, simply check the box beside it, fill in any details it asks for, and save the settings using the button at the bottom of the settings page. To learn more about a particular feature, click the blue (i) icon beside it on the right hand side of the settings screen.

      To enable the open image links in a light box feature, for example, go to the "Posts" section of the settings page, click the heading bar to expand the section if it isn't already and then check the box beside: "Open linked images in a lightbox". Save the settings and your links should now open in a lightbox.

      I hope that helps, but let me know if you still aren't sure what to do. Thanks!

      Reply
  10. Nevermind. Must have been a cacheing issue, as it's now working.

    Reply
    • Great! I'm glad you got it working, Michael.

      Reply
  11. The new Divi Booster option doesn't seem to work. It still just links to the image in a new window when the image is set to link to the Media File, rather than opening it in a lightbox.

    Reply

Submit a Comment

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

Hundreds of new features for Divi
in one easy-to-use plugin

20 Comments

  1. Hello, does anyone know a way to have more than one image in a lightbox?

    Reply
    • Hi Alan, one way is to use the Divi gallery module – all the images in the gallery will show up in the lightbox. An alternative, if you have multiple individual image modules on the page and want them to all appear in the same lightbox (as they would if they were part of the same gallery), you can do this:

      https://divibooster.com/open-images-in-lightbox-groups/

      If neither of those will do what you need, perhaps you can share an example of a page where you'd like to have the images shown in the lightbox, or describe in a bit more detail what you want to achieve? Thanks!

      Reply
  2. THANK YOU! All the other "Divi image in lightbox" plugins I tried would not cause images from a Gutenberg-created gallery to open in a lightbox. I did not want to add another lightbox library, just wanted to use whatever Divi is using!

    I purchase Divi Booster almost 5 years ago. Once again, you've came through for my Divi customization needs!

    Reply
    • Glad it helped! 🙂

      Reply
  3. The manual jquery code is awesome. I added it to the theme options and it works like a dream! Thanks, much appreciated.

    Reply
    • You’re welcome, Tina!

      Reply
  4. I cannot get this to work at all! it just links to the attachment page – any ideas?

    Reply
    • Hey Bev, any chance you're able share a link to the page you're working on so that I can take a look? Thanks!

      Reply
  5. It seems like open images in lightbox was broken with this latest update. It had been working on a Divi blurb that linked to an image, but now it does not.

    Reply
    • Hi Jeff, sorry I'm just getting to this. Are you able to share a link to an example page? I just tried on my test site and it's working with the latest Divi Booster and Divi 4. On possibility is that there's a JavaScript error on the page preventing the Divi Booster feature from running – but I should be able to tell you more if I can take a look. Thanks!

      Reply
  6. There does not seem to be an Open linked images in a lightbox option in divi booster any more? Or am I missing something?

    Reply
    • Hey Veikko, it's still in there, but… a while ago I extended the feature to work on pages too (Divi Booster 2.8.7). Since it no longer made sense for it to be located in the "Posts" section of the Divi Booster settings, I moved it to:

      Divi > Divi Booster > Site-wide Settings > Links > Open linked images in a lightbox

      It seems I missed updating the location in this post, however, so my apologies about that. I've updated the post now. Thanks!

      Reply
  7. Hi, i've just purchased your plugin in order to get this feature. I have activated the lightbox option, deleted the cache but it doesn't work.
    A line of text is linked to the image but when I'm clicking on the anchor, it opens the image on its own.
    Thanks

    Reply
    • Hey Christopher, is there any chance you're able to share a link to the page you're working on so that I can take a look at what's going on? Thanks!

      Reply
  8. Thanks! It worked!

    Reply
  9. Hi. Just purchased the Divi Booster. Is there a video on how to use it once the plugin is installed? Not sure what to do.

    Thanks.

    Reply
    • Hi Eugene, I don't have a video on how to use the plugin, I'm afraid. But once the plugin is installed, from your WordPress dashboard go to "Divi > Divi Booster". That will take you to the Divi Booster settings screen which contains most of the settings added by Divi Booster, organized by the section of Divi they act on. To enable a feature, simply check the box beside it, fill in any details it asks for, and save the settings using the button at the bottom of the settings page. To learn more about a particular feature, click the blue (i) icon beside it on the right hand side of the settings screen.

      To enable the open image links in a light box feature, for example, go to the "Posts" section of the settings page, click the heading bar to expand the section if it isn't already and then check the box beside: "Open linked images in a lightbox". Save the settings and your links should now open in a lightbox.

      I hope that helps, but let me know if you still aren't sure what to do. Thanks!

      Reply
  10. Nevermind. Must have been a cacheing issue, as it's now working.

    Reply
    • Great! I'm glad you got it working, Michael.

      Reply
  11. The new Divi Booster option doesn't seem to work. It still just links to the image in a new window when the image is set to link to the Media File, rather than opening it in a lightbox.

    Reply

Submit a Comment

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