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>Related Post: Adding JavaScript / jQuery to Divi.
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 :)
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..!
I have images – from image module and from gallery module. How to group all this images to show after open lightbox?
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!
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 ;) ).
You're welcome, Karol. Thanks for pointing out the typo – I've just corrected it :)
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 ;)
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!
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?
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!