Lightbox richtig einbinden

Lightbox von Lokesh Dhakar ist das ursprüngliche und sicherlich auch bekannteste Lightbox-Skript. Es ist in JavaScript programmiert und hat die Aufgabe, kleine Vorschaubildchen beim Anklicken zu vergrößern und als Ebene über die Webseite zu legen. Der Vorteil ist, dass sich das vergrößerte Bild nicht in einer neuen Webseite öffnet und der Benutzer somit auch nicht nach jedem Bild wieder zurück navigieren muss. Und auch ganze Diashows lassen sich damit einrichten.

Da ich Anleitungen manchmal nur recht flüchtig lese, machte ich Fehler bei der Einbindung, sodass das Skript nicht funktionierte. Dabei ist auf der Webseite des Anbieters alles präzise erklärt. Trotzdem möchte ich hier die Vorgehensweise selbst einmal und in deutscher Sprache notieren – ja, genau, insbesondere für mich selber, damit sich das fürs nächste Mal bei mir einprägt. Learning by blogging, könnte man sagen.

Im Head-Bereich der HTML-Datei wird auf die CSS-Datei der Lightbox verwiesen, also beispielsweise:

<link rel="stylesheet" href="includes/lightbox.css">

Mehr gehört gar nicht in den Kopfbereich. Erst am Ende der HTML-Datei, vor dem schließenden Body-Tag, wird auf die JavaScript-Dateien verwiesen. Lightbox setzt JQuery voraus, und der Link zu dieser JavaScript-Bibliothek muss als erstes gesetzt werden. Erst danach kommt der Verweis auf die Lightbox-JavaScript-Datei. Beispiel:

<script src="includes/jquery.min.js"></script>
<script src="includes/lightbox.js"></script>

Schreibe einen Kommentar

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

Mit Absenden dieses Kommentarformulars bestätigst du, dass du die Datenschutzerklärung gelesen hast und dich mit der Speicherung deiner Daten einverstanden erklärst. Deine Daten werden nur benötigt, um dich gegebenenfalls zwecks Beantwortung deiner Anfrage kontaktieren zu können, und werden weder an Dritte weitergegeben noch zu Werbezwecken missbraucht.


Torsten Kelsch