Open Image Links in a Lightbox


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 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 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 jQuery / PHP

If you want to enable image links in to open in a lightbox without using a plugin, here is the jQuery code to do so:

<script data-name="dbc_links_in_lightbox">
jQuery(function($) {
		var $links = $('.entry-content a, .et_pb_post_content a').filter(db_is_image_link).not(db_is_gallery_image_link);
		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")); 
As of Divi 4.10, the Magnific Popup library used to display the lightboxes is no longer loaded by default, and must be explicitly loaded as needed. You can do so by adding this PHP code to your site:
add_action('wp_enqueue_scripts', 'dbc_lightbox_images_register_magnific_popup', 11); // Enqueue later than 10 to avoid triggering child theme enqueued stylesheet detection in et_divi_enqueue_stylesheet()

function dbc_lightbox_images_register_magnific_popup() {
    if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
    wp_enqueue_style('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
    wp_enqueue_script('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);

WP Rocket Compatibility

If you're using WP Rocket's "Delay JavaScript Execution" feature, adding the following exclusions should ensure the code works correctly:


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

Divi Booster

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


  1. If you are using the Theme Builder post content module on a single post, you need to replace $('.entry-content a') with $('.et_pb_post_content a') for it to work. Hope this helps for anyone looking for this.

    • Hi Christian, thanks for pointing that out – you're right. I've updated the code above to handle both cases. Cheers!

      (side note: the Divi Booster feature mentioned already includes this enhancement).

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

    • 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:

      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!

  3. 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!

    • Glad it helped! :)

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

    • You’re welcome, Tina!

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

    • 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!

  6. 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.

    • 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!

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

    • 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!

  8. 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.

    • 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!

  9. Thanks! It worked!

  10. 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.


    • 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!

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

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

  12. 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.


Submit a Comment

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