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
Werbung
