Heute zeige ich euch, wie es mittels CSS3 möglich ist, sogenannte Lightbox Bildergalerien (Mein Favorit Shadowbox!) komplett ohne JavaScript zu erzeugen.

Fangen wir mit folgendem kurzem HTML-Code an:

<ul class="gal">
<li id="pic1"><a title="Picture 1" href="#pic1"><img alt="Pic 1"
src="1.jpg"></a></li>
<li id="pic2"><a title="Picture 2" href="#pic2"><img alt="Pic 2"
src="2.jpg"></a></li>
<li id="pic3"><a title="Picture 3" href="#pic3"><img alt="Pic 3"
src="3.jpg"></a></li>
<li id="pic4"><a title="Picture 4" href="#pic4"><img alt="Pic 4"
src="4.jpg"></a></li>
<li id="pic5"><a title="Picture 5" href="#pic5"><img alt="Pic 5"
src="5.jpg"></a></li>
<li id="pic6"><a title="Picture 6" href="#pic6"><img alt="Pic 6"
src="6.jpg"></a></li>
<li id="home"><a title="Close" href="#home">X</a></li>
</ul>

Hier sehen wir sechs verlinkte Bilder inklusive eines "Schließen-Links", zu dem ich später noch kommen werde.

Nun allerdings direkt zum CSS-Code, fangen wir zuerst mit einigen generellen Dingen an:

body {background:#000}
*{padding:0;margin:0;border:0}
.gal li {list-style-type:none}
.gal a {text-decoration:none;color:#ddd}
.gal a:hover {opacity:.5}
.gal li:not(#home) {float:left;height:200px;width:200px;margin:2em;overflow:hidden;position:relative;border:5px solid #ddd;border-radius:10px}
.gal li:not(#home) a {
    position:absolute;
    left:-640px;
    top:-480px;
}

An sich erstmal nichts Wildes. Besondere Beachtung sollte man jedoch den letzten beiden Ausdrücken schenken: Die not-Pseudoklasse. Das Interessante an diesem Ausdruck ist, dass er sich koppeln lässt, z.B. a:not(:link):not(:visited):(.first) Ob das Beispiel jetzt allerdings Sinn ergibt, darf jeder für sich selbst entscheiden. Man sieht aber in welche Richtung es geht.

Nun weiter in der Bildergalerie mit einigen Animationen:

.gal a {
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

CSS-Transitions sind schon etwas Feines, wenn sie ein Standard wären. Da es noch keiner ist, kennen noch nicht alle Browserhersteller den unteren Ausdruck "transition", sondern kommen mit ihren proprietären Ausdrücken daher. Erst in naher Zukunft wird man sich die ersten drei Ausdrücke sparen können.

Die Erklärung dazu gestaltet sich auch recht simpel, ändert sich das Attribut opacity der Links, soll dies in einer 0,4 sekündigen Animation dargestellt werden. Weiter im Programm:

.gal li:not(#home):target {
   background:#000;
    border:0;
    border-radius:0;
    position:absolute;
    top:0;
    left:0;
    margin:0;
    height:100%;
    width:100%;
    z-index:1;
}
.gal li:not(#home):target a {
    top:5%;
    left:10%;
    width:80%;
    height:80%;
    opacity:1
}
.gal img {
    -webkit-transform: rotate(40deg);
    -moz-transform:rotate(40deg);
    -o-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    transform:rotate(40deg);
}
.gal li:target img {
    border:10px solid #ddd;
    height:100%;
    display:block;
    margin:0 auto;
    -webkit-transform: rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}

In allen Definitionen tauchen einige Neuerungen aus CSS3 auf. :target ist wiederum eine neue Pseudoklasse mit der es möglich ist den aktuellen Anchor (der natürlich auch einer id im HTML-Code entspricht) auszulesen. Mit transform lassen sich 2D- Transformationsoperationen wie Verschieben, Drehen oder Rotieren durchführen. In diesem Fall wollen wir die Bilder um 40 Grad gedreht sehen. Wenn li der aktuelle Anchor ist - mit anderen Worten wenn darauf geklickt wurde - soll die Rotation wieder rückgangig gemacht werden.

.gal li:not(#home) a[title]:after {
    color:#ddd;
    content:attr(title);
    display:block;
    font-size:2em;
    text-align:center;
}
.gal li:not(#home):target + li:not(#home) {
    left:auto;
    margin:1em;
    opacity:1;
    position:absolute;
    right:0;
    top:25%;
    z-index:3;
}

Hier finden sich keine wirklichen Neuerungen, aber trotzdem ein paar interessante Features. In der ersten Definition wird die Pseudoklasse :after in Verbindung mit content:attr(title) genutzt, um sich hinterher das title- Attribut unter dem Bild anzeigen zu lassen. Bevor jetzt einige aufschreien, "Warum nicht das alt- bzw title-Attribute des img-Tags nutzen?!". Tja, das wollte ich zu Beginn auch, bevor ich allerdings feststellen musste, das für img-Tags laut Spezifikation :before und :after nicht definiert sind:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Im zweiten Ausdruck ist der aus CSS2 bekannte Sibling-Selektor + zu sehen. In diesem Fall werden alle li-Tags nach dem aktuell selektierten (:target) li-Tag ausgewählt.

Kommen wir zum Schluss zu unserem Schließen-Link:

.gal #home {
    opacity:0;
}
.gal li:target ~ #home {
    opacity:1;
    position:absolute;
    font-size:3em;
    z-index:2;
    width:100%;
    height:100%;
}
.gal li:target ~ #home a{
    color:#222;
    left:50%;
    opacity:1;
    position:absolute;
    top:5%;
}
#home a:hover {opacity:0.5 !important}

Bis auf die Tilde sollte hier alles bereits bekannt sein. Der ~ Operator ist ein neuer Sibling-Selektor aus CSS3. Im Gegensatz zum + Selektor muss der "Geschwister-Tag" nicht direkt dahinter liegen.

Der eine wird aus dem Staunen vielleicht nicht herauskommen, aber das war es bereits. :-) Das eigentliche Ergebnis will ich natürlich nicht vorenthalten. Eine Demo findet ihr hier: CSS3 Gallery Demo mit einigen Sehenswürdigkeiten aus Gent.

Wer nicht drauf klicken möchte, hier zwei Vorschaubilder:

CSS3-Gallery Übersichtsseite CSS3-Gallery Großansicht

Leider ist CSS3 nicht ganz vollkommen, so dass man im Endeffekt für eine komplette Bildergalerie wohl doch nicht ganz auf JavaScript verzichten kann. Folgende Probleme tauchen aktuell noch auf:

  • Die Gallery wird natürlich nicht auf allen Browsern (Hallo Internet Explorer 9!) laufen, da einige Ausdrücke einfach noch nicht standardisiert sind. Ich habe die Gallery im aktuellen Firefox, Chrome und Opera erfolgreich getestet.
  • Eine Vorschau auf das nächste Bild existiert, allerdings nicht auf das vorherige Bild. Eine Möglichkeit konnte ich bis jetzt nicht finden, was zum einen einfach daran liegt, dass es mit CSS nicht möglich auf vorherige Elemente zuzugreifen. Falls jemand trotzdem eine schöne Möglichkeit kennen sollte, immer her damit. :-)
  • Mit CSS3 kann man natürlich keine richtigen Thumbnails generieren. Die Seite schlägt mit sechs großen Bildern mit stolzen 3,7 MB zu Buche.

Ansonsten ist das Teil (fast) perfekt. :-)

Zum Schluss möchte ich mich noch bei Benjamin De Cock für seinen unglaublichen CSS-Playground bedanken, auf diesem ich mir den ein oder anderen Trick abschauen durfte.

CSS3 Gallery Demo mit einigen Sehenswürdigkeiten aus Gent.

blogroll
tags