Ein LightBox-Modul mit Vanilla Javascript und CSS

Das LightBox-Modul, realisiert mit Javascript und CSS

Aufgabe der LightBox

Mit der LightBox kann man HTML-Elemente sichtbar machen, die die ursprüngliche Seite vollständig überdecken und dabei deren Bedienung sperren (modaler Dialog). Sie ist inzwischen eine etablierte Form der Bildpräsentation im Internet (Webentwicklung).

Zur Verwendung der Box wird ein div-Tag in den HTML-Code integriert, das absolut positioniert wird und außerdem 100% der Breite und 100% der Höhe einnimmt. Durch das Setzen des Hintergrundes dieses Elements erscheint die ursprüngliche Seite abgedunkelt, infolgedessen der Benutzer erkennt, das er die Elemente der Seite nicht bedienen kann. Anpassungen an den persönlichen Geschmack oder ein vorgesehenes Design können überdies mit Hilfe der dazugehörigen CSS-Datei vorgenommen werden (Eigenschaften 'color', 'background-color' und 'transition' des Selektors '.lb').

Die Box ist zunächst nicht sichtbar (display: none;), kann aber durch Aufruf einer Funktion des Moduls eingeblendet werden. Der Aufruf dieser Funktion erfolgt typischerweise durch einen Eventhandler, der z.B. durch Betätigen einer Schaltfläche (Button) aktiviert wird.

Das Schließen der Box kann einerseits mit Hilfe des automatisch generierten Schließen-Button erfolgen, andererseits über Tastatureingabe (Escape). Natürlich kann man auch das Aussehen des Schließen-Buttons mit Hilfe der CSS-Datei anpassen.

Integration der LightBox

Die LightBox erfordert zusätzliche Elemente innerhalb des HTML-Code:


    <head>
        :
1       <link rel = "stylesheet" type="text/css" href="lightbox.min.css" />
        :
2       <script async src="lightbox.min.js"></script>
        :
    </head>
    <body>
3       <div id="anID" class="lb">
4       </div>
5       <button onclick="lb.showLbFigure ('anID', 'aPicture.jpg', 'any text'); ">
:           Show the picture
:       </button>
    </body>

Element Nr. 1: Das Aussehen der Elemente der Box wird über Klassen gesteuert, die in der lightbox.css-Datei definiert sind.

Element Nr. 2: Die Javascript-Datei des LightBox-Moduls

Element Nr. 3: Das umschließende div-Tag der Klasse 'lb'. Dies ist das LightBox-Element innerhalb des HTML-Dokuments. Platziert dieses Element in der Nähe von Element #5, um den Code besser lesbar zu machen.

Die Elemente innerhalb der Box werden von den Funktionen 'showLb', 'showLbImage', 'showLbImage' und 'showLbFigure' automatisch in die Box integriert. Für individuelle Lösungen können weitere Tags zwischen die div-Tags gesetzt werden.

Element Nr. 4: Das abschließende div-Tag der Box. Platziert es unmittelbar nach Element Nr. 3.

Element Nr. 5: Das Element, das den Event-Handler zum Öffnen der LightBox enthält, z.B. ein Button oder etwas ähnliches. Platziert dieses Element dort, wo ihr es braucht.

Funktionen des LightBox-Moduls

Das LightBox-Modul stellt folgende Funktionen zur Verfügung:


lb.init ();                          // Initialisierung der Variablen (Option)
lb.show (anId);                      // Zeige nur die LightBox an (ohne Inhalt)
                                     // Tastatur und Maus werden vom Modul nicht behandelt
lb.showLb (anId, options);           // Zeige LightBox mit einem Schließen-Button an
lb.showLbImage (anId, anImage, options);
                                     // Zeige die Box mit Schließen-Button und einem Bild an
lb.setCaption(anElement, aCaption);  // Setze eine Bildunterschrift oder ändere sie
lb.showLbFigure (anId, anImage, aCaption, options); 
                                     // Zeige die Box, Schaltfläche, Bild und Unterschrift an
lb.hide ();                          // Verberge (schließe) die LightBox (Option)
lb.get ();                           // Das aktuelle LightBox-Element abrufen (Option)
lb.getVisibility ();                 // Abrufen, ob die LightBox sichtbar ist (Option)
lb.getScrollbarWidth ();             // Bildlaufleistenbreite abrufen (Option)
lb.getVersion ();                    // Die Version des Moduls abrufen (Option)

Die Funktionen 'show' und 'showLb' können genutzt werden um Sonderlösungen zu realisieren. Beispiele dafür sind in der lbDemo.htm zu sehen.

Parameter der Funktionen

Folgende Parameter werden den Funktionen übergeben:


anID:            Typ: String         Die ID der LightBox. Die ID muss im html-Dokument eindeutig sein!
anImage:         Typ: String         Dateiname bzw. url eines Bildes das angezeigt wird.
anElement:       Typ: Objekt         Bild-Objekt (Tag), in das eine Bildunterschrift integriert wird
aCaption:        Typ: String         Die Bildunterschrift (Caption)
options:         Typ: Object         Optionen, mit denen das Verhalten des Moduls beeinflusst werden kann.
  closeButton:   Typ: Boolean        Anzeige des Schließen-Buttons kann unterdrückt werden
  closeOnClick:  Typ: Boolean        Durch einen Click auf die Fläche der LightBox wird diese geschlossen
  keyControl:    Typ: Boolean        Tastaturüberwachung (Schließen mit [ESC]) kann unterdrückt werden

Hinweise zur Verwendung

Das Modul ist, zusammen mit einem Demo-Programm, auf Github zu finden und kann von dort herunergeladen werden.

Funktionen 'showLbImage' und 'showLbFigure':
Das Bild wird so groß wie möglich auf dem Bildschirm angezeigt, ohne beschnitten zu werden. Daher ist es nicht sinnvoll, kleine Bilder zusammen mit der LightBox zu verwenden. Das Beispielbild hat eine Auflösung von nur 774 x 518 Pixeln. Auf großen Monitoren erscheint es deshalb bereits unscharf.

Schließen-Button:
Der Schließen-Butten hat keinen Text, sondern wird mit einer SVG-Grafik gefüllt. Die Definition dafür erfolgt über die Variable '__LBCLOSECONTENT' innerhalb des Javascript-Moduls. An dieser Stelle kann man den Inhalt des Buttons eigenen Bedürfnissen angepassen.