Skip to main content

JS Image Lightbox

Nach einiger Recherche und ein paar Tests, hat sich für mich die JavaScript basierte Lightbox von Lokesh Dhakar als beste Option herauskristallisiert. Besonders positiv ist die einfache Nutzung. Die JavaScript-Datei muss einmalig eingebunden werden und durch ein Argument im Link-Tag für das Bild wird dies beim Aufruf in einer schlichten Imagebox angezeigt werden. Wahlweise können mehrere Bilder zu einem Album zusammengefügt werden, sodass alle Bilder des Albums durchgeschaut werden können. In diesem Post oder auf seiner Website ist eine einfache Anleitung zu finden.

Besonders überzeugt hat mich: Intuitive Installation und Verwendung, Schlichtes und flexibles Design,Eeinfache Gruppieren von Bildern zu Alben, Laden des jeweils akuellen Bildes durch JS.

Beispiel

 

Installation

Zur Installation muss lediglich die lightbox.js und lightbox.css Datei auf dem Webserver gespeichert werden. Die Dateien können hier direkt von der Entwicklerseite heruntergeladen werden. Oder es kann über Paketmanager geladen werden: npm install lightbox2 --save, bower install lightbox2 --save.

Anschließend müssen beide Dateien auf jeder Seite auf der die Lightbox verwendet werden soll eingebunden werden. Dazu wird folgende Zeile im <head> ... </head>Bereich eingefügt:

Die JavaScript-Datei, greift auf die HTML-Elemente zu und muss daher nach dem letzten Bild eingebunden werden. Für die Übersichtlichkeit fügt man solche Dateien ganz am Ende des angezeigten Bereichs ein. Also direkt vor dem </body>-Tag:

Die Pfade müssen dabei selbstverständlich duch den Speicherort der jeweiligen Dateien ersetzt werden. Es bieten sich die Ordner js/ bzw. css/ an, die in vielen Projekten sowieso vorhanden sind.

Hinweis: Der Code verwendet jQuery-Befehle, wenn jQuery nicht sowieso schon eingebunden ist, sollte an stelle der lightbox.js die lightbox-plus-jquery.js Datei verwendet werden. Diese Datei befindet sich im Unterordner dist/js/ der Heruntergeladenen Zip-Datei.

Nutzung

Hier zeigt sich die Stärke dieser Methode: Die intuitive Verwendung. Zumindest für diejenigen die mit HTML vertraut sind.

Ein beliebiger <a>-Tag (er sollte natürlich auf ein Bild zeigen) wird dabei um das Argument data-lightbox="gruppen-name" erweitert. Der Name der Lightbox kann frei gewählt werden, wichtig ist nur, dass alle Bilder, die mit dem gleichen data-lightbox-Attribut versehen werden in der Lightbox als Bilderalbum zum Durchklicken oder als Diashow angezeigt werden. Wahlweise kann noch ein weiteres Attribut für die Bildunterschrift mitgegeben werden: data-title="Bildunterschrift"

Der Code für die beiden Beispiele oben hat also folgende Struktur:

WordPress

Lizenz

MIT

Quelle: http://www.lokeshdhakar.com/projects/lightbox2/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.