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>

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

Enhance Your Divi Galleries

Take your Divi gallery experience to a whole new level. With Divi Gallery Booster, easily style, group, and showcase your galleries like never before. Perfect for creating a stunning visual experience that keeps users engaged.

Latest Posts

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

Disable Slide-In Animation for Divi Gallery Grid Images

Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...

Control Image Count Display in Divi Gallery Lightbox

Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...

Hide Gallery Image Titles in the Divi Lightbox Overlay

Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...

Random Posts

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