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:

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) {;
	$('body').on('click', '.mfp-container', function(e) {
		if(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement) {
			if (!$('.mfp-arrow, .mfp-img')) {;

Many thanks to Dylan at 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


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.