CSS3-Lightbox komplett ohne Javascript

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

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

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.

22 Kommentare

  1. Hey,

    interessanter Ansatz.
    Ich habe einen Ähnlichen Ansatz in Verwendung.
    Wenn bei den Lightbox- Elementen als Anker “#_” angehangen wird, dann erledigt sich das mit dem zum oberen Rand des Bildschirmes springen.

  2. Hallo,
    wenn ich merhere Bilder untereinander habe so das ich scrollen muss, so wird nach dem schliessen des Vollbildes immer ganz nach oben gescrollt.
    So das man wieder nach unten scrollen muss um die Bilder weiter anzusehen.
    Wie kann ich dies verhindern ??

  3. 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.

  4. 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..!

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

    1. @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… 🙂

  6. 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

  7. 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

    1. 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

  8. 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.

  9. 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.

Schreibe einen Kommentar

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