Open Divi Gallery in Full-Screen Mode

|

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>

Many thanks to Dylan at hddev.fr for the idea and initial version of the code :)

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.