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>
jQuery(function($) {
		var $links = $('.entry-content a, .et_pb_post_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>
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);
}

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

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

32 Comments

  1. Hi! and thanks for that information! It works again well, but i have a problem: the lightbox works in desktop, but doesn´t work in mobile. Are there some code to add for this?
    Thanks

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

      Reply
  2. Hello Dan (and everyone else),

    I was really (REALLY!) happy with the jQuery-snippet you supplied, after searching for a solution for hours. But I just found out that the Lightbox-functionality isn't working anymore. Even when I disable Defer jQuery etc. Is there a way to make it work again? I tried using the code with 'Code Snippets'-plugin (hoping to bypass Divi), but it still doesn't work… Any help is much appreciated!

    Reply
    • Hey Peter! The issue is, I think, that the Magnific Popup library that this jQuery relies on is no longer loaded by default in Divi. As such, we now need to load it ourselves. I've added the code to do this. Note that it is PHP code, rather than jQuery. This PHP can be added using the Code Snippets plugin (or in a child theme functions.php file, etc). I hope it helps, but give me a shout if you have any trouble with it. Thanks!

      Side note for anyone using Divi Booster: the plugin has already been updated to load Magnific Popup as needed, so there's no need to add the PHP code in that case.

      Reply
  3. So I've been playing with this to figure out what I can do to get the lightbox feature to come back. I turned off Divibooster, learned to add in the jquery code above, and lightbox still didn't work.

    What did work is a weird way to get it working. I added in a new row at the bottom then added in an "image module". I made sure not to keep an actual image in it, but in content>Link, I said "yes" to "Open in Lightbox".

    That's what got it working for me again. I wonder if using the Divi Image Hover plugin messed with the divibooster plugin since the only thing I had updated was Divi Image Hover (It's what I use for my portfolio designs).

    If someone is able to look through my website to see what I'm doing wrong I would appreciate it.
    ruemojica(.)com.

    Reply
    • Hey Rue, sorry you've been having this issue, and thanks for the details of your workaround. I don't think this is related to Divi Image Hover, rather it's a result of the recent Divi performance updates (I've been able to reproduce it without DIH installed). The Divi Booster feature relies on a JavaScript library that used to be loaded by Divi by default, but now is only loaded when Divi perceives it to be needed (e.g. when an image with "Open in Lightbox" is added to the page – which is why your workaround with the empty image module works). I'll update Divi Booster as soon as possible to ensure the library is loaded correctly for the "Open linked images in a lightbox" feature is enabled and will update here once I've done so. Apologies for the hassle, and thanks again!

      Reply
      • Hey Rue, I've just released Divi Booster v3.6.1 which should fix the issue. I hope it helps, but let me know if not. Thanks!

        Reply
        • Thanks Dan! I'll update my plugins soon and test it out. I'll get back to you after!

          Reply
          • Thanks Rue :)

  4. Today, I updated my plugins and my lightbox feature stopped working. I tried disabling then enabling the plugin and going into the divi booster settings to turn off the setting and turn it back on, but nothing is working. Any help would be appreciated. Thanks.

    Reply

Submit a Comment

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