UPDATE: Since DIVI 2.6 you can disable the DIVI built-in Gallery in the Theme Options. Our call was heard and this core-hack is therefore obsolete!
If you are using the DIVI Theme (actual version 2.5.9) and tried to install another lightbox plugin of your choice, you might have as well found out that it simply doesn’t work and the DIVI internal lightbox function stays active. I have raised the issue in Elegant Theme’s forum and I hope they consider adding a checkbox to deactivate the DIVI lightbox directly from somewhere in the theme options, in this way opening the needed flexibility to choose for ourselves, which lightbox we want to use.
For the moment there is only a core hack available, thanks to the user dpcdpc11 who posted his solution in the forum. I figured out the lines and you find the two functions that you need to comment out in the file Diviincludesbuilderscriptsfrontend-builder-scripts.js from line 1022 to line 1063 (in 2.5.9). To comment out, use // in front of each line, or simple delete the lines.
NOTE: Be aware that this is a core-hack and the changes will get lost with your next update of the theme and that you need to do it again after the update. In case you have a solution that can disable the DIVI lightbox from within the functions.php of a child-theme, or any other update-safe solution, it would be great if you share it in the comments.
Recommendation: I love the plugin Responsive Lightbox by DFactory. It is a free plugin with such amazing functionality and design, simply the best I ever found, and getting better and better.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
if ( $et_post_gallery.length ) { $et_post_gallery.each(function() { $(this).magnificPopup( { delegate: 'a', type: 'image', removalDelay: 500, gallery: { enabled: true, navigateByImgClick: true }, mainClass: 'mfp-fade', zoom: { enabled: true, duration: 500, opener: function(element) { return element.find('img'); } } } ); } ); // prevent attaching of any further actions on click $et_post_gallery.find( 'a' ).unbind( 'click' ); } if ( $et_lightbox_image.length ) { // prevent attaching of any further actions on click $et_lightbox_image.unbind( 'click' ); $et_lightbox_image.bind( 'click' ); $et_lightbox_image.magnificPopup( { type: 'image', removalDelay: 500, mainClass: 'mfp-fade', zoom: { enabled: true, duration: 500, opener: function(element) { return element.find('img'); } } } ); } |
Dont work for me in 2.5.9 version, did the same (they were on different rows) and still two lightboxes open
Hello Tom, I updated a site of a friend albertmann.de now, lightbox was double due to overwriting of the corehack, but when I have commented out the lines again, the DIVI lightbox disabled again. So for me it still works. Try again, must have been something else. (I updated this post, so lines 1022-1063 are the ones for actual version 2.5.9)
Hello, is there also a way to disable the image link on the images?
With this solution the lightbox disables, but the image are still clickable and open normally in the window. I don’t want them to be opend/clickable :/
Hey Zey, meanwhile the DIVI lightbox can be disabled in the theme without any hacks, check the Theme options. When disabled, also the images will not be linked any longer.
Or, another reason can be that you embed them with a link settings, make sure to set “Link to” to None in the “Attachment Display Settings” whenever adding an image.
This hack still seems necessary… I’m using Divi 3 – and simply switching off / on the “enable Divi Gallery” in theme options didn’t disable the stock Divi lightbox functionality on my gallery module and this was popping 2 lightboxes (the divi one and the 3rd party plugin) . So I applied this hack and it worked – ie. no 2 lightboxes.
Hi there,
Just wanted to let you know, I was able to include this in my child theme’s function.php, and achieve and remove Divi’s Lightbox functionality. I have not tried it with any gallery plugins, yet, but feel free to try.
var $et_post_gallery = $( ".et_post_gallery" );
// Remove click action from Divi Gallery
$et_post_gallery.unbind( "click" );
// Make sure we don't travel to the image, either
$et_post_gallery.find( "a" ).click(function(event) {
event.preventDefault();
});
Hope this helps.
Hey Allan, thanks for sharing :)