CSS3-Lightbox komplett ohne Javascript

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Die Lightbox ist eine beliebte Möglichkeit, Bilder im Großformat auf einer Website darzustellen. Mittels diverser Javascript-Bibliotheken lassen sich Bilder dynamisch im Vordergrund einer Seite anzeigen, während die eigentliche Website verdunkelt wird. Mit CSS3 lässt sich ein solcher Lightbox-Effekt auch ganz ohne Javascript realisieren.

Erst HTML, dann ein wenig CSS

CSS3-Lightbox

CSS3 macht vieles einfacher und den Quelltext schlanker. So sind für einen Lightbox-Effekt nur ein paar Zeilen HTML und wenige Zeilen CSS3 nötig. Zunächst werden per HTML die Miniaturansichten sowie die großen Einzelansichten der Galerie festgelegt:

<ul>
  <li><a href="#bild1"><img src="bild1_klein.jpg.webp" /></a></li>
  <li><a href="#bild2"><img src="bild2_klein.jpg.webp" /></a></li>
  <li><a href="#bild3"><img src="bild3_klein.jpg.webp" /></a></li>
</ul>

<ul class="lightbox">
  <li id="bild1"><a href="#start"><img src="bild1.jpg.webp" /></a></li>
  <li id="bild2"><a href="#start"><img src="bild2.jpg.webp" /></a></li>
  <li id="bild3"><a href="#start"><img src="bild3.jpg.webp" /></a></li>
</ul>

Wichtig ist, dass die Ankerbezeichnungen bei den Miniaturansichten (erste Liste) identisch sind mit den IDs der Lightbox-Ansichten (zweite Liste). Alles weitere wird per CSS3 definiert. Zunächst werden die einzelnen Listenelemente der Lightbox-Ansicht in ihrer Position, Opazität und Größe auf Null gesetzt, so dass sie nicht sichtbar sind. Die Eigenschaft „display: none“ kann hier nicht verwendet werden, da damit ein CSS-Transition-Effekt zum Einblenden der Lightbox nicht funktionieren würde:

ul.lightbox li {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  -webkit-transition: opacity 1.5s;
}

Da bei der Lightbox die eigentliche Website abgedunkelt werden soll, wird die Hintergrundfarbe auf schwarz mit einem Alphawert von 0.75 gesetzt. Die Opazität der Lightbox-Ansicht ändern wir per CSS-Transition.

Mit der Pseudoklasse „target“ legen wir die Werte fest, die beim Klick auf eine Miniaturansicht angwendet werden sollen. Diese werden für die Listenelemente und die darin enthaltenen Ankerelemente definiert:

ul.lightbox li:target {
  width: 100%;
  height: 100%;
  opacity: 1;
}

Die angegebenen Werte sorgen dafür, dass die Liste den gesamten Anzeigebereich einnimmt und die Opazität per Transition auf Eins gesetzt wird. Das eigentliche Bild wird innerhalb des A-Elementes dargestellt:

ul.lightbox li:target a {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -315px 0 0 -415px;
  border: 15px solid #fff;
  -moz-box-shadow:0 1px 8px #000000;
  -o-box-shadow:0 1px 8px #000000;
  -webkit-box-shadow:0 1px 8px #000000;
}

Für eine zentrierte Positionierung des Bildes werden die Werte für „top“ und „left“ auf jeweils 50 Prozent gesetzt. Die Werte für „margin“ werden für den Abstand nach oben und links auf jeweils die Hälfte der Breite und Höhe (zuzüglich Rahmenbreite) des Bildes gesetzt. Per „border“ und „box-shadow“ kann das Bild noch gestalterisch angepasst werden.

Vor- und Nachteile

Der Vorteil dieser CSS3-Lightbox liegt auf der Hand: Sie funktioniert ohne Javascript und bedarf nur einiger weniger Zeilen CSS3.

Der Nachteil bei der Sache: Befindet sich die Miniaturansicht nicht am Beginn der Seite und muss gescrollt werden, so wird beim Einblenden der Lightbox immer zum Anfang der Seite zurück gesprungen.