CSS3-Lightbox komplett ohne Javascript

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Michael
Gast
4 Jahre 4 Monate her

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
Gast
Patrick
3 Jahre 26 Tage her

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

Oink
Gast
Oink
4 Jahre 3 Monate her

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.

trackback

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

Andre
Gast
Andre
4 Jahre 3 Monate her

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

Denis
Gast
Denis
2 Jahre 1 Monat her

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

Denis
Gast
Denis
2 Jahre 1 Monat her

html wird nicht abgebildet – den Link schauen:
http://forum.de.selfhtml.org/archiv/2001/11/t385/

trackback

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

Andy
Gast
Andy
3 Jahre 9 Monate her

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

Pierre Léger
Gast
3 Jahre 4 Monate her

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

foerb
Gast
foerb
3 Jahre 2 Monate her

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

Dieter Petereit
Dr. Web
3 Jahre 2 Monate her

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

panga
Gast
panga
3 Jahre 2 Monate her

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
Gast
3 Jahre 2 Monate her
@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… Read more »
Häusler, Martin
Gast
Häusler, Martin
3 Jahre 1 Monat her

Würde das ganz auch mit einem Video funktionieren?

helen keller on acid
Gast
helen keller on acid
2 Jahre 11 Monate her

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

Michael
Gast
2 Jahre 11 Monate her

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

Tomy
Gast
Tomy
11 Monate 28 Tage her

Hallo Michael

Das kleine ( o ) steht für den Browser Opera, damit der Opera Browser diese Funktion auch bearbeiten kann.

MFG Tomy

Peter
Gast
Peter
2 Jahre 11 Monate her

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

Atlan
Gast
2 Jahre 5 Monate her

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.

Cay
Gast
Cay
1 Jahr 25 Tage her

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

Thomas W.
Gast
Thomas W.
6 Monate 29 Tage her

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.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen