Lightbox
Achtung
Es gibt auch eine Offline Version, die ohne Internet-Verbindung funktioniert:
Zur Offline Version der Lightbox
Es gibt auch eine Offline Version, die ohne Internet-Verbindung funktioniert:
Zur Offline Version der Lightbox
Einbindung
- Laden Sie den ZIP-Ordner "Lightbox" herunter und entpacken Sie den Ordner.
- Die benötigten Dateien finden Sie unter "lightbox".
- Kopieren Sie die Bilder (close, loading, next, prev) aus dem images-Ordner in den images-Ordner des Projekt-Ordners.
- Kopieren Sie aus dem css-Ordner die Datei
lightbox.min.cssin den css-Ordner und aus dem js-Ordner die Dateilightbox.min.jsin den js-Ordner des Projekt-Ordners. - Fügen Sie die richtigen Verknüpfungen zu den Dateien vor dem schliessenden
</head>-Tag ein und passen Sie den Pfad an. - Die Bilder müssen im
<body>-Bereich eingefügt und richtig verlinkt werden .
HTML - Head
Hinweis
Die Verknüpfung zum JQuery-Framework (
Wenn in der HTML-Seite bereits das JQuery-Framework verwendet wird z. B. es wurde schon der Slider eingebaut oder bei der Verwendung von Bootstrap- oder HTML5UP-Templates,
braucht das JQuery-Framework nicht mehr eingebunden werden!
Bei HTML5UP-Templates wird die Verknüpfung zur JavaScript-Datei vor dem schliessenden
Die Verknüpfung zum JQuery-Framework (
<script src="https://code.jquery.com/jquery-latest.min.js"></script>) darf nur einmal in der HTML-Seite vorkommen!Wenn in der HTML-Seite bereits das JQuery-Framework verwendet wird z. B. es wurde schon der Slider eingebaut oder bei der Verwendung von Bootstrap- oder HTML5UP-Templates,
braucht das JQuery-Framework nicht mehr eingebunden werden!
Bei HTML5UP-Templates wird die Verknüpfung zur JavaScript-Datei vor dem schliessenden
</body>-Tag eingefügt.
HTML - Body
Beispiel-Code für 3 Vorschaubilder (img-Tag), welche jeweils mit einem großen Bild (für die Lightbox) verlinkt werden.
Aufbau HTML:
- Zuerst kommt der Link zum großen Foto (dieses wird dann in der Lightbox geöffnet), im Link-Tag wird dann das kleine Thumbnail-Image (Vorschaubild) eingefügt
- wie ein ganz "normales" Bild. - data-lightbox="gallery1": dient dazu, dass man danach in der Lightbox vor/zurück navigieren kann und Bilder zu einer Galerie zusammenfassen kann; Möchte man das nicht, so muss man unterschiedliche Namen vergeben. Dies benötigt man, wenn man z. B. mehrere Bilder auf der Seite hat, diese sollen dann auch in der Lightbox geöffnet werden, aber man soll nicht vor/zurück navigieren können.
Meine Lightbox
Download
Dieses Lightbox-Paket kann auch hier heruntergeladen werden:
Download Lightbox