The Divi Theme includes a gallery module which can display a grid of images in your pages. When you click on an image its full size version is opened in a lightbox. Normally when you click on this enlarged image it will load the next image from the gallery into the lightbox. If you would instead like to send the user to a different page when they click on the lightbox image, here's how to do it.
Note: this is a rough first attempt at achieving this effect – let me know in the comments if you need any help getting it to work correctly on your site.
Here's an example of the jQuery code for turning gallery module lightbox images into clickable links:
<script>
jQuery(function($) {
$('body').on('click', '.et_pb_gallery_image a, .mfp-arrow', function() {
setTimeout(
function() {
$('.mfp-img').off('click');
$('.mfp-img').on('click', function(e) {
e.stopPropagation();
var obj = {
"https://cdn.mysite.com/image1.png": 'https://divibooster.com',
"https://cdn.mysite.com/image2.png": 'https://extrabooster.com'
};
var $mfpimg = $(this);
$.each(obj, function(key, value) {
if ($mfpimg.attr('src') == key) {
document.location.href=value;
}
});
});
},
50
);
});
});
</script>You can add it into the "Divi > Theme Options > Integration > Add code to body" box.
The crux of the code is to check if the image src matches one of those in the "obj" array. If so, it redirects to the corresponding URL. So in my example, if the image clicked on is "https://cdn.mysite.com/image1.png" then it'll redirect to 'https://divibooster.com'. To set it up for your own gallery you'd need to replace these with your own image srcs / destination URLs.
The code is by no means perfect, for example:
- I don't currently tie it to any particular gallery, so it will apply to any gallery on the site – probably adding an ID to the gallery and including in the line "$('body').on('click', '.et_pb_gallery_image a, .mfp-arrow', function() {" (before .et_pb_gallery_image) would help a bit. However, since lightbox overlay is basically separate from the gallery in the page, I think the code will still affect any gallery. One possible solution is to put the code in a code box only on the page it is needed. Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Hello and thank you for this tutorial!
For my part I hijacked the code a little so that the browser goes full screen, but the function is only triggered during the second click on the gallery, do you have the same problem?
Hey HDDEV, I think what you might be seeing is the result of the 1000ms delay in applying the redirection code. This was originally in place to ensure the code ran after Divi's own code for handling clicks on the images (which my code needs to disable). However, in testing now, it looks like it's possible to get by with a much smaller delay, so I've updated the code to above to use a timeout of just 50ms. That should remove any issue with the first click being missed. I hope that helps, but let me know if not. Thanks!
Hey ! thank you for your quick feedback!
I still have the same problem, the event is triggered on the second click the goal for me is when you click on the image that it appears in full screen (F11 function of the browser) and when the we click outside the image we cancel the full screen (in progress) I put my code here but since this is not the subject of your post can you create another one? I think it can be useful for others! :)
jQuery(function($) {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
$('body').on('click', '.et_pb_gallery_image', function() {
setTimeout(
function() {
$('.et_pb_gallery_image').off('click');
$('.et_pb_gallery_image').on('click', function(e) {
alert("test");
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
}
else {
cancelFullScreen.call(doc);
}
});
},
50
);
});
});
You're welcome, HDDEV! Thanks for sharing your code! I've turned it into a new post and (I believe) sorted out the second click issue and got the click to cancel working correctly:
https://divibooster.com/open-divi-gallery-in-full-screen-mode/
I hope it helps, but let me know if it doesn't do what you need. Cheers!