Lesefortschritt:

Divi-Galerie im Vollbildmodus öffnen

6. September 2023 | Divi-Theme, Mediathek, Scripts

Trick # 272 | Dieser Beitrag beinhaltet 394 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Divi enthält ein Galeriemodul, mit dem Sie ein Raster von Bildern anzeigen können. Wenn Sie darauf klicken, öffnen sich diese Bilder in einem Leuchtkasten. Wenn Sie dieses Galerie-Popup stärker hervorheben möchten, erfahren Sie hier, wie Sie den Browser in den Vollbildmodus schalten können, während das Galeriemodul in der Lightbox angezeigt wird.

Der folgende jQuery-Code erkennt, wenn auf ein Bild des Galeriemoduls geklickt wird, und fordert den Browser auf, in den Vollbildmodus zu wechseln. Dann veranlasst er, dass der Browser den Vollbildmodus verlässt, wenn das Leuchtkasten-Popup des Galeriemoduls geschlossen wird.

Das Script können Sie in den <head>-Bereich Ihrer Website einbinden. Unter Divi/Theme-Optionen/Integration. Alternativ können Sie das Script auch mittels eines Codemoduls auf jener Seite einfügen, auf welcher die Galerie angezeigt wird:

<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>

Das war’s schon. Der Browser wechselt bei jedem Galerieaufruf zuverlässig in die Vollansicht.

Werbung

Mobilmenü im Divi-Footer deaktivieren

Standardmässig macht das Divi-Theme aus jedem Menü auch eine mobile Variante für Tablets und Mobiltelefone. Das ist meist patent - oft braucht man auf diesen Geräten aber kein Footer-Menu. Wenn Ihnen das Standardmenu im Header auf Mobilgeräten ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.