CSS3: Minigalerie mit Zoomfunktion ganz ohne JavaScript

Realisieren lässt sich eine solche Funktion in CSS3 mit der Eigenschaft „transition“, mit der Animationen erstellt werden können, sowie der Pseudoklasse „target“.  Die Pseudoklasse „target“ kann auf Elemente zugreifen, auf die mit einem dokumentinternen Verweis – erkannbar am #-Zeichen in der Adresse – verwiesen wurde.

Galerie mit HTML anlegen

Zunächste einmal wird die Galerie mit ein paar Zeilen HTML angelegt. Dazu werden die einzelnen Bilder in einen DIV-Container gesetzt und mit einem internen Link versehen, der auf die jeweiligen IDs der IMG-Elemente verweist:

<div id="minigalerie">
  <a href="#b1"><img src="bild1.png" id="b1" width="100" height="50" /></a>
  <a href="#b2"><img src="bild2.png" id="b2" width="100" height="50" /></a>
  <a href="#b3"><img src="bild3.png" id="b3" width="100" height="50" /></a>
</div>

Zwei Dinge sind hierbei zu beachten. Beim Link muss es sich um einen internen Link handeln (hier „#b1“, „#b2“ und „#b3“), der mit der Pseudoklasse „target“ angesprochen werden kann, sobald dieser Link aufgerufen wird.

Außerdem muss beim Bild eine Datei angegeben werden, die bereits die volle Auflösung des Bildes beinhaltet. Die Miniaturansicht wird dadurch erreicht, dass bei der Breiten- und Höhenangabe ein jeweils kleinerer Wert angegeben wird. Im Beispiel haben unsere Bilder eine Auflösung von 300 mal 150 Pixel. Für die Miniatur wird eine Auflösung von 100 mal 50 Pixel angegen. Alle Bilder der Galerie müssen im Übrigen alle dieselbe Auflösung haben.

Die eigentliche Zoomfunktion wird nun ausschließlich mit CSS3 realisiert.

Zoomfunktion mit CSS3 ergänzen

Die Zoomfunktion soll beim Klick auf ein Bild dieses per Animation auf die volle Auflösung vergrößern. Dabei sollen alle Bilder vertikal mittig ausgerichtet werden. Um dies zu erreichen, sollen sich den DIV-Container per „display“ wie eine Tabelle verhalten und die A-Elemente wie Tabellenzellen:

#minigalerie {
  display: table;
  border-spacing: 10px;
}

#minigalerie a {
  display: table-cell;
  vertical-align: middle;
}

Per „border-spacing“ wird erreicht, dass die Bilder in einem gewissen Abstand zueinander stehen. Per „vertical-align“ wird erreicht, dass alle Bilder vertikal mittig ausgerichtet sind.

Als nächstes wird die Animation mit der CSS3-Eigenschaft „transition“ festgelegt:

#minigalerie img {
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}

Über „transition“ wird die Dauer der Animation in Sekunden angeben. Zwar wird die Eigenschaft von allen aktuellen Browsern unterstützt. Dennoch ist die jeweilige Vendor-Variante erforderlich, damit die Browser diese Eigenschaft umsetzen.

Als letztes wird der Zustand definiert, den die Animation nach der angegeben Dauer erreichen soll. Dies geschieht mit der Pseudoklasse „target“:

#minigalerie img:target {
  width: 300px;
  height: 150px;
}

Hier wird für die Breite und Höhe des Bildes die volle Auflösung angegeben, die durch den Zoom erreicht werden soll. Klickt man nun auf eine der Miniaturansichten, wird über die Animation das Bild entsprechend vergrößert. Klickt man auf ein anderes Bild, wird das aktuell große Bild verkleinert und das zuletzt angeklickte vergrößert.

Zu guter Letzt kann man die Darstellung der Bilder noch etwas aufhübschen, indem man ihnen einen Rahmen und einen leichten Schatten hinzufügt:

#minigalerie img {
  background-color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 7px rgba(100, 100, 100, 1);
  -moz-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
  -webkit-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
}

Und schon ist die Minigalerie fertig und funktionsfähig – zumindest in aktuellen Browsern, die diese CSS3-Eigenschaften unterstützen.

Abgesehen davon, dass man ganz ohne JavaScript auskommt, gibt es einen weiteren Vorteil dieser Galerie. Man kann auch direkt auf ein Bild verweisen, das vergrößert dargestellt werden soll, indem man die entsprechende URL mit Verweis auf die Bild-ID aufruft. Wer im Browser beispielsweise „index.html#b2“ eingibt, erhält automatisch den Zoom für das zweite Bild.

Ist diese Minigalerie für euch eine Alternative zu Frameworks wie Lightbox und Fancybox oder zieht ihr JavaScript vor?

Weitereführende Links zum Thema CSS3:

• CSS3: Mit HSL-Farben und Alphakanälen arbeiten
• Schicke Hover-Effekte mit CSS3 Transitions
• CSS3: Abwechselnd gestaltete Spalten und Zeilen mit „nth-child“ und „nth-of-type“
• CSS3 und Appearance: Wenn einfacher Text zu einem Link oder Button wird
• CSS3: So werden Texte einfach mehrspaltig