CSS3-Lightbox komplett ohne Javascript
Reading Time: 3 minutes 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.
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.
Der einzige sinnvolle Grund wäre als Fallback, wenn JS im Browser deaktiviert ist.
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.
Ganz nett 🙂
Bei der lightbox noch position auf fixed und der Scrolleffekt bleibt aus.
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
html wird nicht abgebildet – den Link schauen:
http://forum.de.selfhtml.org/archiv/2001/11/t385/
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
…auch ideal für Ebay Auktions Themes oder Templates.
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
Da hast du natürlich Recht. Danke für den Hinweis!
Man kann einen Ferseher auch ohne Fernbedienung bedienen – puristisch, ohne zusätzliche Technik, gesund zu Fuß am Gerät. Ich bleibe bei der Fernbedienung.
@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… 🙂
Würde das ganz auch mit einem Video funktionieren?
ich bekomm es nicht hin… kann jemand vllt erkennen, was ich falsch gemacht habe? liebst. http://helenkelleronacid.blogspot.de/p/photogra.html
Was ist denn -o-transition?
das wird in meinem editor garnicht als css befehl erkannt
Genauso wie -o-box-shadow: ..?
Bitte Hilfe!
Hallo Michael
Das kleine ( o ) steht für den Browser Opera, damit der Opera Browser diese Funktion auch bearbeiten kann.
MFG Tomy
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..!
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.
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 ??
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.