Open Images in Lightbox Groups

Written by Dan Mossop

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>

Enhance Your Divi Gallery Module!

Upgrade your Divi galleries with the Divi Gallery Booster plugin. Add the options you need to create stunning, interactive galleries with ease. Perfect for users looking to enhance their site's image display capabilities!

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

10 Comments

  1. Magnificent solution! Thank you very much – that is such an ease of life improvement and so versatile in its use cases. This should literally be incorporated into the Divi core :)

    Reply
    • You're very welcome, Daan! Yeah, I like the effect it gives and would love to see it in Divi core. I doubt it's particularly high on Elegant Themes' priority list though, so I'm not expecting to see it added any time soon..!

      Reply
  2. I have images – from image module and from gallery module. How to group all this images to show after open lightbox?

    Reply
    • Hi Mariusz, if your gallery is in grid mode, one option might be to switch from a gallery module to individual image modules and lay them out in the same way your gallery was. Then the technique in this post should work for all the images. If that doesn't work for you though, let me know – there might be some way to modify the code above to get it to work with galleries too. Thanks!

      Reply
  3. 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
  4. 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
  5. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.