Design

CSS3-Lightbox komplett ohne Javascript

30. April 2012
von

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" /></a></li>
  <li><a href="#bild2"><img src="bild2_klein.jpg" /></a></li>
  <li><a href="#bild3"><img src="bild3_klein.jpg" /></a></li>
</ul>

<ul class="lightbox">
  <li id="bild1"><a href="#start"><img src="bild1.jpg" /></a></li>
  <li id="bild2"><a href="#start"><img src="bild2.jpg" /></a></li>
  <li id="bild3"><a href="#start"><img src="bild3.jpg" /></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.

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

19 Kommentare zu „CSS3-Lightbox komplett ohne Javascript
  1. Michael am 30. April 2012 um 22:25

    Ein weiterer Nachteil ist wohl auch, dass die großen Bilder immer geladen werden. Eine JavaScript-Lightbox kann diese jedoch auch erst beim Klick nachladen.
    Wie ich es auch gedanklich drehe und wende fällt mir momentan kein praktischer Anwendungszweck ein. Man könnte beispielsweise diese CSS3-Variante bevorzugen und eine JavaScript-Lightbox als Fallback für ältere Browser nutzen. Aber auch dabei bleibt der Nachteil bestehen, dass alle Bilder geladen werden.

    • Patrick am 5. August 2013 um 16:31

      Der einzige sinnvolle Grund wäre als Fallback, wenn JS im Browser deaktiviert ist.

  2. Oink am 2. Mai 2012 um 07:33

    Trotz das die großen Bilder immer geladen werden, find ich sowas genial, dass man das ganze ohne Javascript lösen kann. Für die Zukunft würde ich mir noch eine Demopage zum Artikel wünschen, damit man das ganze ausprobieren kann. Vielen Dank.

  3. Viele Links (Teil 3) - Servaholics am 2. Mai 2012 um 12:31

    […] Eine Lightbox ohne JavaScript, dafür mit CSS3?: drweb.de. […]

  4. Andre am 6. Mai 2012 um 22:37

    Ganz nett :)
    Bei der lightbox noch position auf fixed und der Scrolleffekt bleibt aus.

    • Denis am 12. Juli 2014 um 15:51

      Wer aber statt Bilder eine Tabelle in der Lightbox hat, die zu hoch ist und die nicht nach unten gescrollt werden kann, dann kann vielleicht das helfen:
      einfaches Beispiel:

      Tabelle Demo

      Spalte 1Spalte 2
      Fuß 1Fuß 2

      zeile 1 spalte 2
      zeile 2 spalte 2
      zeile 3 spalte 2xxxxxxxx
      zeile 4 spalte 2
      zeile 5 spalte 2
      zeile 6 spalte 2

  5. […] CSS3-Lightbox komplett ohne Javascript: und im übrigen … herzlich willkommen zurück Dr. Web […]

  6. Andy am 1. November 2012 um 22:05

    Geniale Idee mit der lightbox nur auf html css Basis , könnte man da auch ein Road Trip also slide show daraus machen oder Symbole zum Schließen oder vor und zurück einfügen ?
    Vilen Dank

  7. Pierre Léger am 17. April 2013 um 08:48

    …auch ideal für Ebay Auktions Themes oder Templates.

  8. foerb am 4. Juni 2013 um 15:20

    hey, coole sache! jedoch ist in dem html code noch ein kleiner fehler oder? in dem “ul class= lightbox” sind die bilder vorne alle mit bild1 aufgelistet… müssten die nicht mit bild1,bild2,bild3 gelistet sein?… also nur so gings dann bei mir. ansonsten super teil. danke

  9. panga am 19. Juni 2013 um 00:25

    Man kann einen Ferseher auch ohne Fernbedienung bedienen – puristisch, ohne zusätzliche Technik, gesund zu Fuß am Gerät. Ich bleibe bei der Fernbedienung.

    • WERBZEUG am 25. Juni 2013 um 12:24

      @panga
      Dein Kommentar geht an der Realität vorbei.
      Diese Idee hat weniger etwas mit “puristisch”, “old-school” oder gar “ewig-gestrig” zu tun.
      Da JS (im Gegensatz zu php) nunmal client-seitig ist (und somit Hauptverbreiter von unerwünschten Viren/Malware etc.) habe ich immer wieder Kunden (oder IT-Verantwortliche dieser Kunden), die eine Lösung außerhalb JS explizit wünschen. Und es gibt einige Betriebe, die JS (und anderes) auch in Ihren Einstellungen für Ihre (Mitarbeiter-)Netzwerke deaktiviert haben.
      Das ist Realität.
      Objektorientiert kann CSS niemals JS (oder Flash/Actionscript) das Wasser reichen, was auch gar nicht Sinn der Sache ist. Bei künsterlischen, animierten oder superdynamischen Seiten mit viel Look und wenig Basic Content ist das auch vollkommen okay. Aber bei Basis-Seiten, wo designtechnisch außer Bildergalerien oder der anspruchsvollen Adaption der corporate identity wenig unbedingte Notwendigkeit besteht, JS zu nutzen ist so eine Idee wie diese CCS Lightbox ‘ne super Sache.
      Auch als backup für das – potentiell geblockte – JS verwendbar!

      Der Vegleich zur TV-Fernbedienung hinkt also ganz schön – was beim Aufstehen und am Gerät umschalten zusätzlich stören könnte… :-)

  10. Häusler, Martin am 20. Juli 2013 um 10:30

    Würde das ganz auch mit einem Video funktionieren?

  11. helen keller on acid am 9. September 2013 um 16:43

    ich bekomm es nicht hin… kann jemand vllt erkennen, was ich falsch gemacht habe? liebst. http://helenkelleronacid.blogspot.de/p/photogra.html

  12. Michael am 19. September 2013 um 10:12

    Was ist denn -o-transition?
    das wird in meinem editor garnicht als css befehl erkannt
    Genauso wie -o-box-shadow: ..?
    Bitte Hilfe!

  13. Peter am 23. September 2013 um 15:16

    Kann ich statt einem Bild auch einfach nur text in die Lightbox machen?
    also ich hab das problem dass der text dann in einem a-tag ist und das möchte ich nicht (selbstverständlicherweise denke ich)

    Bitte um Hilfe..!

  14. Atlan am 29. März 2014 um 22:07

    also interssant CSS3-Lightbox, benutze das original ( siehe seite) nun würde ich gerne gleichfals mit LB ein Bild über der index.html seite ein und ausblenden ( zur info für Interssierte…) ohne eine Maus zu benutzen ,also ganz im hintergrund. eben wie das Popup Fenster, aber eben mit LB. geht das auch ? und wie ? Danke für ne anregung.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!