Design

CSS3-Lightbox komplett ohne Javascript

30. April 2012

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.

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

17 Kommentare

chronologisch
nach der Bewertung zuerst neue chronologisch
1

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.

2

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

3

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.

4

Ganz nett :)

Bei der lightbox noch position auf fixed und der Scrolleffekt bleibt aus.

5

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









6

html wird nicht abgebildet - den Link schauen:

http://forum.de.selfhtml.org/archiv/2001/11/t385/

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

8

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

9

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

10

Da hast du natürlich Recht. Danke für den Hinweis!

11

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

12

@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... :-)

13
Häusler, Martin

Würde das ganz auch mit einem Video funktionieren?

14
helen keller on acid

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

15

Was ist denn -o-transition?

das wird in meinem editor garnicht als css befehl erkannt

Genauso wie -o-box-shadow: ..?

Bitte Hilfe!

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

17

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.