MKLightbox

Ein einfaches Skript zum responsiven Öffnen von Bildern und Videos in einer Lightbox – einfach im Code und einfach in der Nutzung. Unterstützt werden das Nachladen von hochauflösenden Bildern und die Darstellung von Beschreibungstexten in der Lightbox.

Verwenden

Die Dateien bei GitHub herunterladen und im Header der HTML Datei hinzufügen:

<!DOCTYPE html>
<html>
  <head>  
    ...
    <link rel="stylesheet" href="mklb/css/mklb.css">
    <script defer src="mklb/js/mklb.js"></script>
  </head>
</html>

Lightbox für einzelne Bilder

Um ein Bild in einer Lightbox zu Öffnen, einfach die Klasse mklbItem hinzufügen:

<img class="mklbItem" src="image.jpg" />

Soll zunächst ein kleines Thumbnail dargestellt und in die Lightbox ein höher auflösendes Foto geladen werden, wird dafür das data-src-Attribute ergänzt.

<img class="mklbItem" src="thumbnail.jpg" data-src="image.jpg" />

Lightbox für Galerien

Um in der Lightbox die Bilder vor- und zurücknavigieren zu können, wird das Attribut data-galerie mit eindeutigem Wert hinzugefügt:

<img class="mklbImage" src="image.jpg" data-gallery="gallery1" />

Lightbox für Videos

Auch MP4-Videos können in der Lightbox abgespielt werden, indem neben der Klasse mklbItem das data-video-src-Attribute ergänzt wird.

<img class="mklbItem" src="thumbnail.jpg" data-video-src="video.mp4" />

Lightbox für YouTube-Videos

Youtube Video in der Lightbox öffnen
Mit Klick auf den Link werden Cookies geladen. Bitte Datenschutzhinweis beachten.

Soll ein YouTube-Video in der Lightbox abgespielt werden, wird neben der Klasse mklbItem das data-youtube-id Attribute mit der Video-Id ergänzt.

Beispiel für das Youtube-Video https://www.youtube.com/watch?v=wuo13FrNX6g

<a class="mklbItem" data-youtube-id="wuo13FrNX6g">Youtube Video in der Lightbox öffnen</a>

Für die Implementierung wird der erweiterte Datenschutzmodus verwendet. Die Domain für die eingebettete URL im HTML-Code wird daher automatisch von https://www.youtube.com in https://www.youtube-nocookie.com geändert.

Lightbox für Vimeo Videos

Vimeo Video in der Lightbox öffnen
Mit Klick auf den Link werden Cookies geladen. Bitte Datenschutzhinweis beachten.

Soll ein Vimeo Video in der Lightbox abgespielt werden, wird neben der Klasse mklbItem das data-vimeo-id Attribute mit der Video-Id ergänzt.

Beispiel für das Vimeo Video https://vimeo.com/226053498

<a class="mklbItem" data-vimeo-id="226053498">Vimeo Video in der Lightbox öffnen</a>

Für die Implementierung wird der "Do-Not-Tracking" Modus verwendet.