Open Images in Lightbox Groups

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

Rob asks the following about the "Open in Lightbox" feature of the Divi Theme's image module:

Divi allows for some really beautiful image layouts, making it great to create a wonderful pseudo gallery. The one thing it doesn't do though, is make it possible to lightbox the images as a group. Each individual image can be set to open in a lightbox, but the one thing missing is grouping of images together so you can click left/right to cycle through them.

Here's how to group image module images into sets so that they show up in the same lightbox.

Grouping Lightbox Images using jQuery

The jQuery code below scans the page for any images with a CSS class of the form "lightbox-group-xxx", where xxx is the name of the group. Images having the same class name will be opened in the same lightbox. So for example, all images given a CSS class of "lightbox-group-products" would show up in the same lightbox (opened by clicking on any of those images), while all images given a CSS class of "lightbox-group-cats" would show up in another lightbox.

The CSS class can be set in the Advanced tab of the Image module settings. It can also be set on a row or section, so that all image modules in the row / section will be grouped in the same lightbox without the need to add the class to each one individually.

An image can even be given multiple classes so that it shows up in more than one lightbox.

<script> 
// === Open lightbox images in groups ==
jQuery(function($){
	
	setTimeout(function(){ // Run after Divi's own lightbox code
	
		// Get a list of lightbox groups in the page
		var groups = [];
		$('div[class*=" lightbox-group-"]').each(function(){
			var classes = $(this).attr('class').split(' ');
			for (var i = 0; i < classes.length; i++) {
				var matches = /^lightbox-group-(.+)/.exec(classes[i]);
				if (matches != null && $.inArray(matches[0], groups) === -1) {
					groups.push(matches[0]);
				}
			}
		});	
		
		// Create a magnific popup gallery for each group
		groups.map(function(group){
		
			var $images = $('.' + group + ' .et_pb_lightbox_image');

			$images.magnificPopup({
				mainClass: 'mfp-fade',
				gallery: {
					enabled: true
				},
				type: 'image',
				image: {
					// Show titles on images
					titleSrc: function(item) {
						var title = item.el.find('img').attr('title'); 
						return title?title:'';
				  	}
				}
			});
		});
		
	}, 50);
});
</script>

Want get more out of Divi?

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

6 Comments

  1. Great work, you saved me a lot of time. Thanks a lot 🙂

    In the article text above the code, you have a typo – "lighbox-group-cats" instead of "lightbox-group-cats" (I copied CSS name class from there and for a couple of minutes I was trying to find why it's not working 😉 ).

    Reply
    • You're welcome, Karol. Thanks for pointing out the typo – I've just corrected it 🙂

      Reply
  2. I changed the "//Create a magnific popup gallery for each group" section to this

    groups.map(function(group){

    var $images = $('.' + group + ' .et_pb_lightbox_image');

    $images.magnificPopup({
    type: 'image',
    gallery: {
    enabled: true
    }
    });

    });

    The current code works great, but gallerys are not opened at the correct index, they are allways opened at index 0. This simpler initialization works and makes the gallery open at the correct index. I didn't investigate it any further, why the original solution does not work, and what potential downsides this fix has, but I thought you should know 😉

    Reply
    • Hey Vincent, that is a big improvement. Thanks for sharing it 🙂

      I think the problem with the original solution – which I modified from an example I found somewhere – was that it was (unnecessarily) re-building the gallery and losing the index information in the process. I didn't realize magnificPopup could do it directly like this, so I appreciate you enlightening me. I've merged your changes into my code above (and have added some new code to display the image titles). Let me know if you spot any issues with it, etc, and thanks again!

      Reply
  3. Works a treat!
    fantastic – thank you very much for sharing this information.

    The only thing is, the image title, caption or description does not show in the lightbox group.

    Is there a solution to this please?

    Reply
    • You're welcome, Geoffrey, I've just updated the code to show the title set in the image module under "Advanced > Attributes > Image Title Text". I've also just made an improvement to the code suggested by Vincent in his comment, so I'd recommend replacing the entire code with the above (though maybe take a copy before you do in case I've missed anything). Hope it helps!

      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

6 Comments

  1. Great work, you saved me a lot of time. Thanks a lot 🙂

    In the article text above the code, you have a typo – "lighbox-group-cats" instead of "lightbox-group-cats" (I copied CSS name class from there and for a couple of minutes I was trying to find why it's not working 😉 ).

    Reply
    • You're welcome, Karol. Thanks for pointing out the typo – I've just corrected it 🙂

      Reply
  2. I changed the "//Create a magnific popup gallery for each group" section to this

    groups.map(function(group){

    var $images = $('.' + group + ' .et_pb_lightbox_image');

    $images.magnificPopup({
    type: 'image',
    gallery: {
    enabled: true
    }
    });

    });

    The current code works great, but gallerys are not opened at the correct index, they are allways opened at index 0. This simpler initialization works and makes the gallery open at the correct index. I didn't investigate it any further, why the original solution does not work, and what potential downsides this fix has, but I thought you should know 😉

    Reply
    • Hey Vincent, that is a big improvement. Thanks for sharing it 🙂

      I think the problem with the original solution – which I modified from an example I found somewhere – was that it was (unnecessarily) re-building the gallery and losing the index information in the process. I didn't realize magnificPopup could do it directly like this, so I appreciate you enlightening me. I've merged your changes into my code above (and have added some new code to display the image titles). Let me know if you spot any issues with it, etc, and thanks again!

      Reply
  3. Works a treat!
    fantastic – thank you very much for sharing this information.

    The only thing is, the image title, caption or description does not show in the lightbox group.

    Is there a solution to this please?

    Reply
    • You're welcome, Geoffrey, I've just updated the code to show the title set in the image module under "Advanced > Attributes > Image Title Text". I've also just made an improvement to the code suggested by Vincent in his comment, so I'd recommend replacing the entire code with the above (though maybe take a copy before you do in case I've missed anything). Hope it helps!

      Reply

Submit a Comment

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