Alle Anleitungen Diese und weitere Anleitungen finden Sie unter http://stellatest.de/anleitungen

CSS3-Lightbox komplett ohne Javascript

Die Lightbox ist eine der gängigsten Methoden, Bilder auf einer Website darzustellen. In der Regel wird dazu Javascript eingesetzt. Der Klick auf eine Bild vergrößert dabei ein Vorschaubild und verdunkelt den Hintergrund der Website. Mit CSS3 lässt sich ein solcher Lightbox-Effekt auch ganz ohne Javascript verwirklichen.

Die Vorlage für das beschriebene Beispiel finden Sie unter: http://stellatest.de/anleitungen/css/lightboxmitcss/beispiel/lightbox.zip

Sie können hier das folgende Beispiel als Vorlage gezippt herunterladen.

Hier ein Beispiel für die Lightboxfunktion

Die Darstellung erfolgt über Listen, in die die anzuzeigenden Bilder eingebunden werden. Sie benötigen für die Darstellung zwei Listen. In der ersten Liste wird die Voransicht des Bildes integriert, in der zweiten Liste wird das anzuzeigende Bild integriert. Über CSS-Einstellungen wird das Bild in der ersten Liste sofort angezeigt, das Bild in der zweiten Liste wird erst nach Klick auf das Bild in der ersten Liste dargestellt.

Legen Sie zunächst eine Liste für die Voransicht an

Erste Liste mit den Bildern der Voransicht

1. Erstellen Sie eine HTML-Liste, in der Sie für jedes Bild einen Anker einfügen: Ein Anker besteht aus dem Ankerzeichen # sowie einem Namen, der den Anker eindeutig kennzeichnet.
Der Name des 1. Bildes lautet: bild1, der Anker dazu #bild1.

Über diesen Anker kann das damit verbundene Bild in der zweiten Liste anschließend durch Klick angezeigt werden

Achtung: # im Anker ist nicht Bestandteil des Namens sondern kennzeichnet den Anker!

Die Liste sieht nun für zwei Bilder folgendermaßen aus:

Ersetzen Sie "bild1_small.jpg" durch den Namen des Bildes, das in der Voransicht angezeigt werden soll. Sollte das Bild nicht im selben Ordner liegen, ergänzen Sie den Namen durch den vorangestellten Pfad auf die Bilddatei.

Legen Sie eine zweite Liste für die Vergrößerung an

In der zweiten Liste werden die Bilder gestellt, die in vergrößerter Ansicht angezeigt werden sollen. Diese Ansicht wird in einem späteren Schritt in der CSS-Datei ausgeschaltet. Erst durch den Klick auf das Bild in der ersten Liste soll das Bild dieser Liste angezeigt werden.

1. Legen Sie eine zweite Liste an ohne Ankerpunkte aber mit IDs für jeden Listenpunkt
Die zweite Liste erstellen Sie aus einer Kopie der ersten Liste.

Kopieren Sie daher zunächst die erste Liste

Fügen Sie der Liste die Klasse "lightbox" hinzu. (<ul> wird zu <ul class="lightbox">)
Erweitern Sie jeden Listenpunkt <li> um eine Id, der Sie den Namen des Ankerpunktes des entsprechenden Bildes geben. (<li> wird zu <li id="bild1">) für das erste Bild usw.
Löschen Sie aus dem Link <a href="#bild1"> den Ankernamen. Denn in der zweiten Liste soll ja kein Bild aufgerufen werden. Die Linkfunktion wird jedoch weiterhin benötigt:
(<a href="bild1"> wird zu <a href="#">)
Ersetzen Sie zum Schluss den Pfad und Namen des Vorschaubildes (hier "bild1_small.jpg) durch den Pfad auf das vergrößerte Bild, hier ("bild1_big.jpg").

So sieht die aus der ersten Liste abgewandelte zweite Liste aus:

Der Link aus Liste 1 mit dem Anker #bild1 zeigt den Listenpunkt mit der ID bild1:
Wichtig ist, dass die Bezeichnung des Ankers (#) bei den Miniaturansichten in der ersten Liste (a href="#bild1") identisch sind mit der ID der Lightbox-Ansichten in der zweiten Liste (id="bild1"), denn der Link mit dem Anker a href="#bild1" öffnet das Bild im Listenpunkt mit der ID id="bild1"

CSS-Definitionen

Definition der Elemente ul, li, a
Definition der Klasse .lightbox
Definition der Pseudoklasse :target

Zunächst werden die Größe, Breite, Position und Transparenz der einzelnen Listenelemente (<li>) auf Null gesetzt. Sie sind daher nicht sichtbar sind.

Unsichtbar stellen ermöglicht normalerweise auch der Befehl: „display: none“. Mit dieser Anweisung funktioniert jedoch das zeitlich gesteuerte Abdunkeln (in Sekunden) mit dem Befehl "transition" nicht.

/*Diese Anweisung gilt für alle Listenelemente ungeordneter Listen der Klasse lightbox: Alles, was innerhalb von Listenpunkten der Klasse lightbox steht, wird mit diesem Befehl auf 0 gesetzt;*/ ul.lightbox li {
overflow: hidden; /*scrollbalken ausschalten */
position: absolute; /* Absolute Positionierung */
width: 0; /*Breite auf 0 */
height: 0; /*Höhe auf 0 */
left: 0; /*Position von Links 0 */
top: 0; /*Position von Oben: 0 */
opacity: 0; /*Transparenz ausgeschaltet */
}

Mit der Pseudoklasse „target“ legen Sie die Werte fest, die beim Klick auf eine Miniaturansicht angwendet werden sollen. Diese werden für alle Listen der Klasse "lightbox" sowie die Listenelemente und die darin enthaltenen weiteren Elemente definiert:

Breite und Höhe werden auf 100% gesetzt, damit die Transparenz für den gesamten Bildschirm gilt. Sind an anderer Stelle für übergeordnete Elemente Ränder gesetzt, müssen gegebenenfalls Höhe und Breite über 100% erhöht werden.

Da bei der Lightbox die eigentliche Website abgedunkelt werden soll, wird die Hintergrundfarbe auf schwarz mit einem Alphawert von 0.8 gesetzt.

Das Erscheinen der Transparenz (opacity) der Lightbox-Ansicht ändern Sie über den Befehl transition.

/* Durch die Pseudoklasse "target" (:target) am Listenpunkt li wird definiert, was passiert, wenn
man auf den Bereich klickt, der von dem Listenpunkt umschlossen wird. Klickt man noch mal darauf,
kommt diese Einstellung nicht mehr zur Anwendung. */

ul.lightbox li:target {
  width: 100%;
  height: 100%;
  opacity: 1;                     /* Transparenz 100% */
background: rgba(0, 0, 0, 0.8); /* Hintergrundfarbe und Transp. 80% */
   -moz-transition: opacity 1.5s; /* Zeitdauer für firefox*/
  -o-transition: opacity 1.5s;    /*... für Opera */
-webkit-transition: opacity 1.5s; /*... für Smartphone, tablet, google*/
}

Das eigentliche Bild wird innerhalb des a-Elementes dargestellt:

ul.lightbox li:target a {
  position: absolute;
top: 50%; /*zentriert das Bild von oben */
left: 50%; /*zentriert das Bild von links */
margin: -400px 0 0 -400px; /* nach oben und links um 300px */
border: 15px solid #fff; /Weißer Rand von 15px Breite um das Bild */
-moz-box-shadow:0 1px 8px #000000; /* Schattenbox Mozilla */
  -o-box-shadow:0 1px 8px #000000; /* Opera... */
  -webkit-box-shadow:0 1px 8px #000000; /*google etc. */
}

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe uter gleichen Bedingungen (http://de.creativecommons.org/).