Bildergalerie für die eigene Website erstellen – mit dem Flickr-API
Kommentare

APIs spielen in Web-Design und –Entwicklung eine immer größere Rolle und kaum eine Seite kommt mehr ohne die Verwendung verschiedener APIs aus.

So lassen sich damit beispielsweise zahlreiche nützliche Elemente erstellen, die beim Nutzer für eine bessere User Experience sorgen können. Aurelio De Rosa zeigt in seinem zweiteiligen Tutorial, wie man eine Bildergalerie mit dem Flickr-API erstellt und erklärt, welche JavaScript- und CSS-Techniken dafür nötig sind.

Aufbau und Markup der Seite

Mit dem Flickr-API lässt sich leicht eine Bildergalerie erstellen, die dem User nach der Eingabe von Suchbegriffen in eine Suchmaske passende Flickr-Bilder ausgibt. Dabei wird dieser Dienst als einzelne HTML-Seite erstellt, die aus den drei Komponenten Header, Galerie und einer Thumbnails-Liste besteht.

Der Aufbau der Seite sieht folgendermaßen aus:

  • der Header: beinhaltet den Seitentitel und das Suchfeld,
  • die Galerie: zeigt das Bild in seiner natürlichen Größe mit fixierter Breite und Höhe und ermöglicht das Durchklicken durch die gefundenen Bilder
  •  die Liste der Thumbnails: zeigt unterhalb der Galerie die Thumbnails der gefundenen Bilder dreireihig an, mit fünf Bildern pro Reihe

Aurelio De Rosa legt bei seinem Tutorial für das Erstellen einer Bildergalerie mit dem Flickr-API zudem auch Wert auf eine gute Accessibility, sodass die Navigation nicht nur auf Klick-Events reagiert, sondern auch über die Tastatur erfolgen kann.

Das Markup der Seite ist simpel: für den Header werden der Titel als h1-Element und das Suchfeld als form-Element benötigt. Die Galerie besteht vor allem aus einem img-Element zur Darstellung des ausgewählten Bildes und jeweils einem button-Elemente für die Navigationspfeile. Die Thumbnail-Liste umfasst die Liste der Thumbnail-Bilder der aktuell angezeigten Seite sowie den Pager.

CSS- und JavaScript-Module

Die visuellen Styles der Flickr-Bildergalerie sind in einzelne Module unterteilt, die jeweils mit einem bestimmten Style-Aspekt umgehen. Als Basis dient normalize.css; die anderen Module, die in für die Bildergalerie zum Einsatz kommen sind das Layout-Modul, Helper-Klassen, das gallery-Modul, das Thumbnails-Modul und das Homepage-Modul. Wie die einzelnen Style-Module aussehen, um damit am Ende die Bildergalerie zu erstellen, erklärt Aurelio De Rosa in seinem Tutorial.

Auch die Business-Logik ist in kleine Module aufgeteilt. In der Datei main.js werden die Event-Handler für die Navigations-Buttons sowie die Aktion beim Klicken des Users definiert, wodurch die Datei als Verbindung zwischen dem HTML-Markup und den JavaScript-Modulen – zum Einsatz kommen ein Utility-Modul, ein Gallery-Modul und das Flickr-Modul – dient. Auch dies wird mit zahlreichen Code-Beispielen im oben genannten Tutorial ausführlich dargestellt.

Eine Bildergalerie mit dem Flickr-API zu erstellen und diese mithilfe von HTML und CSS in eine Website einzubinden, ist also nicht schwer. Man fügt der eigenen Website so aber ein Feature hinzu, dass die User Experience der Nutzer deutlich verbessern und gleichzeitig für eine bessere Interaktion zwischen User und Website sorgen kann.

Aufmacherbild: empty gallery in art museum von Shutterstock / Urheberrecht: zhu difeng

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -