Es gibt zahlreiche Lösungen, um Galerien per JavaScript zu realisieren. Mal überzeugt die Bedienung nicht, mal ist der Funktionsumfang eher bescheiden. „Flickity“ hingegen ist ein zeitgemäßes JavaScript-Framework für Galerien, welches nicht nur am Desktop funktioniert, sondern auch für Mobilgeräte bestens geeignet ist. Die Galerie ist responsiv und lässt sich sowohl per Maus als auch per Gesten bedienen – bei Bedarf auch per Tastatur. Dank CSS3 kann man sich zudem schnell und animiert durch die Galerie bewegen.
Fix eingebunden und konfiguriert
Wer sich nicht erst durch die Dokumentation lesen will, kann „Flickity“ ohne zusätzliche Konfiguration schnell ins eigene Projekt einbinden. Neben einer JavaScript-Datei für die Funktionalität muss eine Stylesheet-Datei für das Aussehen und die animierten Übergänge im HTML-Kopf eingebunden werden. Anschließend lässt sich per HTML die eigentliche Galerie auszeichnen.
Dazu wird ein Container-Element bestimmt, welches alle Galerie-Elemente umschließt. Dieses erhält die Klassen „gallery“ und „js-flickity“. Dabei kann es sich um ein „<div>“-Element oder ein beliebiges anderes Blockelement handeln – zum Beispiel auch „<figure>“. Die einzelnen Galerie-Elemente erhalten die Klasse „gallery-cell“. Auch hierbei kann es sich um ein „<div>“-Element handeln, welches beispielsweise Bilder oder andere Inhalte umschließt. Es kann aber auch direkt ein „<img>“-Element verwendet werden. Hier ist man sehr flexibel bei der Wahl der Elemente.
<figure class="gallery js-flickity"> <img src="1.jpg" class="gallery-cell" /> <img src="2.jpg" class="gallery-cell" /> <img src="3.jpg" class="gallery-cell" /> … </figure>
Im Beispiel werden ein „<figure>“-Element als Container und drei „<img>“-Elemente als Inhalte für die Galerie definiert. Mehr ist schon gar nicht zu tun, um mit „Flickity“ eine responsive Galerie zu erstellen. Per JavaScript werden verschiedene Buttons ergänzt. Zum einen gibt es zwei Pfeil-Buttons, um jeweils ein Bild vor- und zurückspringen zu können. Außerdem gibt es die Möglichkeit, jedes einzelne Bild der Galerie direkt anzusteuern – per Punkte-Navigation am unteren Rand. Darüber hinaus kann man sich per Drag-Funktion der Maus durch die Galerie bewegen. Auf Mobilgeräten ist die Steuerung per Geste möglich.
Standardaussehen der Galerie, bei dem das ausgewählte Bild zentriert dargestellt wird
Die Pfeil-Buttons werden per „<button>“-Element ausgzeichnet, die Punkte-Navigation als Liste per „<ul>“- und „<li>“-Elemente. Die Pfeile der Buttons sind als SVG-Grafiken hinterlegt. Die einzelnen Menüelemente der Punkte-Navigation sind direkt per CSS gestaltet.
Das Stylesheet sorgt dafür, dass der Wechsel der Bilder per Animation erfolgt. Wird der Galerie keine feste Breite zugewiesen, nimmt sie immer die Breite des Elternelementes ein. Die Größe der einzelnen Bilder wird dabei nicht verändert. Je nach Breite sind Galerie-Elemente neben dem jeweils aktiven Element im Anschnitt sichtbar.
Verändert man die Breite des Browserfensters passt sich die Galerie automatisch der neuen Breite an. Auf Mobilgeräten wird somit auch bei veränderter Bildschirmorientierung die Galerie angepasst.
Auch wenn Bilder ein klassischer Anwendungsfall für eine Galerie sind, ist „Flickity“ nicht auf Bilder reduziert. Wie bereits erwähnt, lassen sich beliebige Elemente per „gallery-cell“ als Galerie-Element auszeichnen. Darin können sich beliebige Inhalte wie Texte und Text-Bild-Kombinationen befinden.
Dank zahlreicher Einstellungen sehr flexibel
„Flickity“ hat zahlreiche Einstellungsmöglichkeiten und kann daher sehr individuell angepasst werden. Die einzelnen Konfigurationsparameter werden dabei über das Data-Attribut „data-flickity-options“ direkt im Container-Element der Galerie definiert. Dabei werden diese als JSON-Objekt übergeben. So lassen sich beispielsweise die beiden Menüs – Vor- und Zurück-Buttons sowie die Punkte-Navigation – ausschalten.
<figure class="gallery js-flickity" data-flickity-options='{"prevNextButtons": false, "pageDots": false}'>
…
</figure>
Da innerhalb des JSON-Objektes die Parameter zwingend in doppelten Anführungszeichen stehen müssen, muss das JSON-Objekt selbst in einfachen Anführungszeichen dem Data-Attribut zugewiesen werden.
Im Beispiel werden per „prevNextButtons“ und „pageDots“ alle Menü-Elemente entfernt. Eine Navigation ist dann nur noch per Maus beziehungsweise Geste möglich.
Auch das Aussehen der Galerie-Elemente lässt sich beeinflussen. So kann die Ausrichtung der einzelnen Elemente definiert werden. Per „cellAlign“ ist es möglich, ein Galerie-Element links- oder rechtsbündig sowie zentriert darzustellen.
<figure class="gallery js-flickity" data-flickity-options='{"cellAlign": "left"}'>
…
</figure>
Galerie, bei dem das ausgewählte Bild linksbündig dargestellt wird
Über den Parameter „contain“ ist es möglich, die Galerie-Elemente so darzustellen, dass immer die gesamte Galeriebreite ausgefüllt wird. Das erste Galerie-Element würde dann immer am linken Rand, das letzte am rechten Rand dargestellt. Es entsteht also kein leerer Bereich.
<figure class="gallery js-flickity" data-flickity-options='{"contain": true}'>
…
</figure>
Zwei Galerien mit linksbündiger Darstellung: links mit gesetztem „contain“-Parameter, rechts ohne
Hervorzuheben ist darüber hinaus noch die Möglichkeit, freies Scrollen zu erlauben. Hierbei wird per „freeScroll“ dafür gesorgt, dass das jeweils aktive Bild beim Loslassen nicht automatisch in die definierte Ausrichtung gebracht wird. Außerdem kann man per „wrapAround“ ein Endlos-Scrolling zu realisieren. Hierbei wird nach dem letzten Galerie-Element wieder das erste platziert und vor dem ersten das letzte.
<figure class="gallery js-flickity" data-flickity-options='{"freeScroll": true, "wrapAround": true}'>
…
</figure>
Mit dem „autoPlay“-Parameter sorgt man für einen automatischen Wechsel der einzelnen Bilder der Galerie. Angegeben wird eine Dauer für die Anzeige pro Bild. Die Auto-Play-Funktion wird deaktiviert, sobald die Galerie manuell bedient wird.
<figure class="gallery js-flickity" data-flickity-options='{"autoPlay": 1500}'>
…
</figure>
Im Beispiel erfolgt ein automatischer Bildwechsel all eineinhalb Sekunden.
Wer mehrere Galerien verwendet und diese zentral einstellen möchte, kann dies tun. Hierzu ist es allerdings notwendig, jQuery oder Vanilla JS eingebunden zu haben.
$(".gallery").flickity({
cellAlign: "right",
contain: true
});Im Beispiel werden Einstellungen für alle Galerien mit der Klasse „gallery“ vorgenommen.
Die hier vorgestellten Parameter stellen nur einen Teil der Möglichkeiten vor, mit denen „Flickity“ konfiguriert werden kann. Wer es noch individueller mag, kann sich anhand der „Flickity“-API beispielsweise eine individuelle Navigation bauen oder dynamisch Elemente der Galerie hinzufügen und sie daraus löschen. Über die API stehen auch eine Reihe von Events zur Verfügung, mit denen auf Interaktionen mit der Galerie reagiert werden.
Fazit und Nutzung
„Flickity“ ist ein sehr durchdachtes Galerie-Framework. Die Galerien erinnern von der Bedienung sehr an das, was man von nativen Apps für Mobilgeräte gewohnt ist. Daher ist die Bedienung sehr intuitiv. Dass es zunehmend wichtig geworden ist, auch auf Mobilgeräten entsprechend bequem und anspruchsvoll Bilder und Ähnliches zu präsentieren, dürfte nicht hervorgehoben werden müssen. „Flickity“ erfüllt all dies.
Die Konfiguration von „Flickity“ ist zudem spielend einfach. Die einzelnen Parameter werden mit Beispielen in der Dokumentation gut vorgestellt. Außerdem gibt es für jedes Beispiel einen bearbeitbaren Quelltext auf CodePen, wo man die jeweilige Einstellung direkt selbst ausprobieren und verändern kann.
„Flickity“ läuft auf allen modernen Browsern. Der Internet Explorer ist ab Version 8 dabei, Android-Browser ab Version 2.3 und iOS-Browser ab Version 5.
Allerdings ist die Nutzung von „Flickity“ nur für Open-Source-Projekte kostenlos. Alle anderen müssen für eine Einzellizenz 25 Dollar bezahlen. Die Lizenz gilt jedoch pro Entwickler und nicht pro Website. Das heißt, man kann das Framework in mehreren Projekten einsetzen. Es gibt auch eine Lizenz für bis zu acht Entwickler für 110 Dollar sowie eine für beliebig viele Entwickler, die dann für 290 Dollar zu haben ist.
Link zum Beitrag
(dpe)
