Divi includes a gallery module which lets you display a grid of images. When clicked, these images open in a lightbox popup. If you'd like to make this gallery popup more prominent, here's how to make the browser switch to full-screen mode while displaying the gallery module lightbox.
Display Divi Galleries in Full-screen Mode with jQuery
The following jQuery code will detect when a gallery module image is clicked on and request that the browser switches to full-screen mode. Then it will trigger the browser to exit full screen mode when the gallery module lightbox popup is closed:
<script>
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() {
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
}
});
$('body').on('click', '.mfp-container', function(e) {
if(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement) {
console.log($(e.target).attr('class'));
if (!$(e.target).is('.mfp-arrow, .mfp-img')) {
cancelFullScreen.call(doc);
}
}
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Many thanks to Dylan at hddev.fr for the idea and initial version of the code :)
0 Comments