Sliding Image Gallery - CSS3 Transition Tutorial

Sliding Image Gallery - CSS3 Transition TutorialSliding Image Gallery - Auf Basis von CSS3 sind auch ohne JavaScript fliessend animierte Übergänge bei Webseiten-Elementen wie Bilder-Galerien möglich. Die hier im Blog bereits vorgestellte CSS3-Eigenschaft Transition ermöglicht ein solches Verhalten. Das folgende Step-by-Step Tutorial soll diesen "Slide-Effekt" anhand einer Bilder-Galerie näher beschreiben. Dieses Tutorial soll aufzeigen was man heute schon mit CSS3-Transition in wenigen Schritten auch ohne JavaScript erreichen kann. Korrekt interpretiert wird dieses Tutorial im übrigen vom aktuellen Safari, Google, Chrome, aber auch von Opera seit Version 10.5. Firefox wird dieses Feature ab Version 3.7 ( siehe Downloadlink unten ) unterstützen, womit dann ca.90% aller Besucher dieses Blogs dieses CSS3 Tutorial in den Genuss von CSS3 Transition kommen dürften.

Step 1: Definieren der HTML-Struktur

Das HTML-Grundgerüst diese Bilder-Galerie behinhaltet ist einfach und übersichtlich aufgebaut. Grundlage des Codes bilden zwei Bereiche, von denen einer die Zoom-Darstellung (.imageZoom) der Bilder-Galerie und der andere die Bilder-Vorschau (.imagePreview) mit 6 Thumbnails beinhaltet. Diese 6 Vorschau-Bilder der Galerie sind zudem ebenso durch eine Liste (ul) strukturiert wie die Zoom-Darstellungen der bereits hier verwendeten Automobile, die zu guter Letzt noch zur Bilderquelle (Flickr) verlinken.

Modernes Webdesign mit CSS - Das neue Buch!

Die aus dieser HTML-Struktur resultierende Darstellung in den entsprechenden Browsern sieht, ohne CSS, nicht sonderlich spektakulär aus. Wichtig zu erwähnen ist noch, dass die Links in der Thumbnail-Navigation Linkziele wie #slide1, #slide2, ... verwenden die von den einzelnen Listenpunkten die die Zoom-Darstellungen beinhalten mittels ID in Form von id="slide1", id="slide2", ... aufgreifen. Wenn diese nicht übereinstimmen, wird dieses Tutorial nicht funktionieren!

Code-Beispiel
...
<div id="imageGallery">
  <div class="imageZoom">
    <ul>
      <li id="slide1"><a href="#"><img alt="Bild 1" src="xxx" /></a></li>
      <li>...</li>
      <li id="slide6"><a href="#"><img alt="Bild 6" src="xxx" /></a></li>
    </ul>
  </div>
  <div class="imagePreview">
    <ul>
      <li><a href="#slide1"><img alt="Vorschaubild 1" src="xxx" /></a></li>
      <li>...</li>
      <li><a href="#slide6"><img alt="Vorschaubild 6" src="xxx" /></a></li>
    </ul>
  </div>
</div>
...

Step 2: Ausrichten der Bilder innerhalb der Galerie

Die ersten CSS-Arbeiten sind bis auf für Einsteiger noch eher unspektakulär. Daher werden die ersten Schritte zur Ausrichtung der Bilder-Elemente innerhalb der Galerie in diesem zweiten Schritt "zusammengefasst". Neben der Festlegung des Bereiches für die gesamte Bilder-Galerie (#imageGallery) werden Höhen, Breiten, Innen- & Außenabstände und Ausrichtungen wie bspw. das Floaten der Bilder definiert.

Code-Beispiel
#imageGallery {
  margin:25px;
  width:500px;
  border: 1px solid #f0f0f0;
}
.imageZoom ul {
  height:131px;
  padding:10px;
  margin:0;
}
.imageZoom ul li {
  list-style: none;
  margin:0;
  padding:0;
  float:left;
  width:0;
  height:131px;
}
.imagePreview {
  height:60px;
  margin:0;
  padding:0;
  background: #f0f0f0;
}
.imagePreview ul {
  margin:0;
  padding:0;
  list-style: none;
}
.imagePreview ul li{
  float: left;
  text-align: center;
  margin:13px 15px;
  padding:0;
  background: #f0f0f0;
}

CSS3-Transition Bilder Galerie - Step2 - Ausrichten der Bilder
CSS3 Tutorial - Ausrichten der Bilder

Step 3: Ausrichten und Gestalten der Vorschau-Navigation

Im folgenden Arbeitsschritt werden die Thumbails, die die Vorschau auf die einzelnen Zoom-Darstellungen der Fotografien darstellen ausgerichtet werden. Hierzu werden den kleinen Bildern ein Rahmen, ein Abstand von 2px zum Rahmen und eine Hintergrundfarbe definiert. Damit insbesondere beim Firefox beim Klick auf diese Vorschaubilder nicht dieser doch recht unschöne "Rahmen" zu sehen ist, wird dieser mittels der Eigenschaft outline und dem ihr zugewiesenen Wert "0" ausgeblendet. Um den MouseOver-Effekt innerhalb Vorschau-Navigation etwas hervorzuheben, bekommt der hier in Zeile 2 definierte Rahmen die Farbe Weiß, um sich somit von den anderen Thumbnails in dieser Situation noch mehr abheben zu können.

Code-Beispiel
.imagePreview ul li img {
  border: 1px solid #9f9f9f;
  padding:2px;
  margin:0;
}
.imagePreview ul li a {
  outline: 0;
}
.imagePreview ul li a:hover img,
.imagePreview ul li a:active img,
.imagePreview ul li a:focus img {
  border-color:#fff;
}

CSS3-Transition Bilder Galerie - Step3 - Ausrichten und Gestalten der Vorschau-Navigation
CSS3 Tutorial - Ausrichten und Gestalten der Vorschau-Navigation

Step 4: Ausrichten der Zoom-Darstellungen (Vorbereitung zum Slide-Effekt)

Im nun folgenden Schritt werden die Eigenschaften für Zoom-Darstellungen finalisiert. Da keine der hier vorhanden sechs Zoom-Darstellung standardmäßig beim ersten Aufruf der Bilder-Galerie "aktiviert" sein soll, da sie mittels des Slide-Effektes von CSS Transition eingeblendet werden sollen, mit dem Wert "0" für die Höhe und Breite der eigentlich 476px breiten und 131px hohen Abbildungen "ausgeblendet".

Code-Beispiel
.imageZoom ul li img {
  margin:0;
  width:0;
  height:0;
  border:0;
  overflow:hidden;
  ...
}

CSS3-Transition Bilder Galerie - Step4 - Ausrichten der Zoom-Darstellungen
CSS3 Tutorial - Ausrichten der Zoom-Darstellungen (Vorbereitung zum Slide-Effekt)

Step 5: Anlegen einer Hintergrundgrafik für den initialen Aufruf der Bilder-Galerie

Die in Schritt 4 angelegten Eigenschaften führen nun dazu, dass die Bilder-Galerie beim initialen Aufruf ohne Abbildung im Zoom-Bereich daherkommt. Aus diesem Grund wird nun eine initiale Hintergrundrafik angelegt, die der unsortierten Liste im Bereich .imageZoom zugewiesen ( den Pfad müsst ihr natürlich Euren Projekt-Strukturen entsprechend anpassen ) wird und somit zumindest einen Ausblick darauf gewährt was den Betrachter der Galerie erwarten kann. Wer will kann hier natürlich auch bereits eine der später verwendeten Abbildungen verwenden.

Code-Beispiel
.imageZoom ul {
  ...
  background: url(Bildpfad) 0 0 no-repeat;
}

CSS3-Transition Bilder Galerie - Step5 - Anlegen einer Hintergrundgrafik
CSS3 Tutorial - Anlegen einer Hintergrundgrafik für den initialen Aufruf der Bilder-Galerie

Step 6: Slide-Effekt "Transition" festlegen

Jetzt kommen wir zu der CSS3-Eigenschaft die erst dem Entstehen dieses Tutorials geführt hat. CSS-Transistion ermöglicht, wie bereist eingangs erwähnt fliessend animierte Übergänge die wie in diesem Tutorial beim Klick auf die Navigationspunkte der Bilder-Vorschau die dazugehörigen Zoom-Darstellungen seitlich einblendet. Sie dehnt sich praktisch von "0" auf "476px" aus. Wer die Zoom-Darstellungen dieser Bilder-Galerie nicht seitlich sondern bspw. von oben einblenden möchte muss hierfür lediglich in den Zeilen 3 bis 6 das Wort den Wert width durch height ersetzen.

Code-Beispiel
.imageZoom ul li img {
  ...
  -moz-transition: width 1s ease;
  -webkit-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
}

CSS3-Transition Bilder Galerie - Step6 - Einblenden der Zoom-Darstellungen
CSS3 Tutorial - Einblenden der Zoom-Darstellungen mittels CSS Transition

Step 6: Ausmaße für den Slide-Effekt mit Pseudoklasse :target festlegen

Um den ohne JavaScript zustandekommenden Slide-Effekt überhaupt erst sichtbar machen zu können, müssen die Ausmaße der Zoom-Darstellungen, welche erst durch die Pseudoklasse :target sichtbar werden, festgelegt werden. Verweist man direkt auf ein Zielelement ( im diesem Fall auf #slide1, #slide2, ... ) kann darüber das entsprechende Element ( in diesem Fall die vergrößerte Darstellung der Autos) über :target ein- bzw. ausgeblendet werden. Ohne diese hier getroffenen Angaben für die Höhe & Breite für die Bilder, würde sich im Verhalten der Navigation nicht viel ändern. Verändert ein wenig mit diesen Angaben für Höhe & Breite und ihr seht sofort die Auswirkungen, die die Werte auf die Bilder-Galerie haben.

Code-Beispiel
.imageZoom ul li:target img {
  height:131px;
  width:476px;
  border:1px solid #f0f0f0;
}

CSS Animation und der IE

Da die CSS-Eigenschaft Animation von den IE-Versionen kleiner gleich Version 8 nicht unterstützt wird, gibt es für diese Browser(versionen) lediglich die initiale Darstellung ( ohne Slide- & Einblend-Effekt ). Die zweite Version der Preview Platform des IE9 interpretiert zwar nicht den Slide-Effekt durch Transition, aber zumindest den Einblend-Effekt dank :target.

View Tutorial Demo

It works on Firefox 3.7a5 pre!

Wer sich einen Ausblick darauf verschaffen möchte wie zukünftige Versionen des Firefox mit der CSS Eigenschaft Animation umgehen, der kann sich bei Carsten eine portable Version des Firefox 3.7a5 pre herunterladen und dieses Tutorial testen, ohne dabei seine aktuelle Version dabei überschreiben zu müssen.

Ich hoffe Euch hat dieses weitere kleine CSS3-Tutorial mit einem kleinen Ausblick auf CSS3 gefallen und vielleicht den ein oder anderen von Euch inspiriert sich ein wenig näher mit dem zu beschäftigen, was uns in Zukunft erwarten kann.

Ähnliche Artikel zu diesem Thema:
  1. Mario 22 Mai 2010, 11:22

    Da ich bereits seit geraumer Zeit Chrome-Anhänger bin, komme ich in den vollen Genuss dieses Tutorials. Wenn das nur alle Browser könnten, könnte man sich das ein oder andere Plugin oder Framework sparen.

    Danke!


  2. Michael van Laar
    22 Mai 2010, 19:18

    Super Tutorial. Und wäre da nicht der Internet Explorer, könnte man das ganze auch heute schon prima verwenden. Denn dass Firefox „nur“ die Bilder ohne hübschen Übergangsfirlefanz einblendet, wäre für mich absolut hinnehmbar.


  3. Jörge 24 Mai 2010, 12:32

    Danke für das super Tutorial. Ich denke ich werde mit der Verwendung aber noch etwas warten - zumindest bis auch Firefox das ganze unterstützt. Müsste dann ja in der nächsten Version so sein.


  4. Tom 24 Mai 2010, 20:16

    hi zusammen und danke für die wirklich tolle zusammenstellung. das ist wirklich immer wieder ein arbeit für sich. wir prüfen immer wieder aufwand und nutzen gerade bei gallerien und anderen plug ins hin und her. hier habt ihr wirklich einen tollen job gemacht. danke dafür tom


  5. Ulrich Schramme 25 Mai 2010, 09:31

    Guter Artikel! Wenn Firefox bei der CSS3-Unterstützung nachzieht, ist das Ganze praxistauglich. Ist mir erheblich sympathischer als die bisherigen Lösungsansätze.


  6. Mandy
    17 Okt 2011, 16:31

    Das ist ja ein klasse Tutorial. Ich interessiere mich immer für Wege wie die Programmierung vereinfacht werden kann oder wie Projekte auf alternative Weise gelöst werden können. Dieses Tutorial stellt für mich so einen Punkt dar. Ich werde den Artikel noch einmal genauer durchlesen und versuchen das Beispiel nachzuvollziehen. Das sieht richtig praktisch aus.


  7. Manuel Rowinski
    06 Dez 2011, 10:26

    Wow ich hätte nicht gedacht, dass so etwas mit CSS möglich ist. Bin ehrlich gesagt auch ein großer Fan davon, den Quellcode möglichst sauber zu gestalten und suche immer wieder Optimierungsmöglichkeiten. Da gefällt mir die CSS-Galerie echt gut. Werde ich am Wochenende mal durchtesten. Einsetzen würde ich diese aber auch nur, wenn der IE damit klar käme. Sind ja leider doch noch einige mit dem IE unterwegs. Und denen möchte ich meine Galerie nicht vorenthalten. Aber klasse Tutorial, vielen Dank dafür!


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage