Lightbox - Offline Version

Einbindung

Laden Sie den ZIP-Ordner (Download) herunter und entpacken Sie den Ordner.
Kopieren Sie aus dem css-Ordner die Datei lightbox.min.css in den css-Ordner und aus dem js-Ordner die Dateien lightbox.min.js und jquery-latest.min.js in 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 werden.
Kopieren Sie die Bilder (close, loading, next, prev) aus dem images-Ordner in den images-Ordner des Projekt-Ordners.

HTML - Head

Hinweis
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

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 (Offline Version) kann auch hier heruntergeladen werden:
Download Lightbox (Offline Version)