Enhance your jQuery: Responsive Photosets
Kommentare

Ein Photoset aus mehreren Bildern eingebettet in ein schönes Layout – das kennen wir von Tumblr und zahlreichen anderen Fotoplattformen nur zu gut und finden es für gewöhnlich sehr ansprechend.
Terry

Ein Photoset aus mehreren Bildern eingebettet in ein schönes Layout – das kennen wir von Tumblr und zahlreichen anderen Fotoplattformen nur zu gut und finden es für gewöhnlich sehr ansprechend.

Terry Mun hat sich überlegt, wie man das auf der eigenen Website auch bewerkstelligen kann: Responsive Photosets. Zwar gibt es bereits entsprechende Plug-ins, z.B. JetPack von WordPress, doch die waren ihm alle zu aufgeblasen. Zugrunde liegen folgende Anforderungen an das „Rohmaterial“:

  1. Die Flexibilität in ein flüssiges Layout einzufließen
  2. Die Anpassbarkeit, dass man es ohne großen Aufwand verändern kann, wie man will und darüber hinaus leicht in WordPress Themes überführen kann
  3.  Die Größe der Bilder, die die volle Breite ihres parent-Containers ausfüllen sollen – nicht mehr und nicht weniger und gleichzeitig in Breite und Höhe proportional bleiben.

Umgesetzt hat er das Ganze mit einem grundsätzlich einfachen HTML Markup, das CSS-Styling besteht aus Styles für jede Bildreihe, einzelnen fließende Items innerhalb der Reihen und Image Captions, die via Hover erscheinen. Eine kleine Besonderheit: Die Breite der Bildreihen hat er auf 150 statt 100% gesetzt. Dies stelle sicher, dass die Floats nicht umbrechen, wenn das Browserfenster in der Größe verändert wird. JavaScript besorgt dann die Neuberechnung der Bilddimensionen. jQery kommt schließlich zum Einsatz, um die geeignete Bildbreite zu berechnen, die gewährleistet, dass alle Bilder in einer Reihe die gleiche Höhe haben, die Bildproportion erhalten bleibt und die Container-Reihe vollständig ausgefüllt wird. Die mathematischen Grundlagen, die Aufgabe des DOM und des resize Events erklärt er ebenfalls ausführlich.

Schließlich erfahrt ihr auch, wie ihr das fertige Photoset in ein WordPress Theme einbinden könnt.

In seiner Demo kann man sich vom Resultat überzeugen. Zwar müsse man die Mathematik hinter dem Ganzen einmal verstanden haben, dann aber stehe einems nichts ehr im Wege, so Mun. Werft doch mal einen Blick drauf und dann kann’s eigentlich auch schon losgehen mit den responsiven Fotocollagen.

Screenshot: http://codepen.io/terrymun/full/GsJli

Aufmacherbild: Many different images of Italy von Shutterstock / Urheberrecht:Petr Jilek

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -