SwipeView: Mobile Bildergalerie mit Gesten-Steuerung für Smartphones und Tablets

Auf JavaScript basierende Bildergalerien gibt es einige. Das Besondere an unserem heutigen Fundstück namens SwipeView ist, dass es auf mobilen Geräten wie Smartphones und Tablets die Gestensteuerung unterstützt. Mit einem Handwisch kann hierbei also durch die Galerie navigiert werden. Auf anderen Geräten kann die Swipe-Bewegung mit der Maus nachgeahmt werden. Aber auch eine klassische Navigation ist vorhanden.

Beispielgalerie für SwipeView

SwipeView ist ein Script, welches nicht als jQuery-Plugin, sondern als eigenständiges Werkzeug daherkommt. Die Einbindung ist leider ein wenig umständlich. Denn neben dem Script, welches im Head eingebunden werden muss, sind einige weitere Zeilen zusätzliches JavaScript notwendig, um zum einen die Funktionalität zum Laufen zu bringen und zum anderen die Inhalte der Galerie einzubinden.

Das Einbinden der Inhalte ist das große Manko: Denn anders als üblich, werden die Bilder der Galerie nicht per HTML ausgezeichnet, sondern direkt per JavaScript definiert. Das ist ungewöhnlich, letztlich aber nicht schwierig, sondern im Wesentlichen eine Geschmacksfrage…

Navigation und Bilder auszeichnen und per JavaScript steuern

Der HTML-Bereich der Galerie ist sehr übersichtlich. Es gibt einen Container, der per JavaScript mit Inhalten gefüllt wird, und eine Liste, über die klassisch durch die Galerie navigiert werden kann:

<div id="inhalt"></div>

<ul id="nav">
  <li id="prev" onclick="gallery.prev()">-</li>
  <li onclick="gallery.goToPage(0)"></li>
  <li onclick="gallery.goToPage(1)"></li>
  <li onclick="gallery.goToPage(2)"></li>
  <li onclick="gallery.goToPage(3)"></li>
  <li id="next" onclick="gallery.next()">+</li>
</ul>

Zusätzlich zur Einbindung der SwipeView-Bibliothek im Head, muss im Body nach den beiden HTML-Elementen ein zusätzliches JavaScript-Snippet eingefügt werden. Hierüber wird unter anderem der Event-Listener „touchmove“ für die Gestensteuerung aufgerufen und das „gallery“-Objekt definiert:

document.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);

var gallery, el, i, page, dots = document.querySelectorAll('#nav li'), slides = [
  {
    img: "bild1.jpg",
    width: 300,
    height: 200,
    desc: "Beschreibung"
  },
… ];

gallery = new SwipeView('#inhalt', { numberOfPages: slides.length });

Über das Array „slides“ werden alle Bilder der Galerie aufgelistet. Als nächstes folgt die Ausgabe der definierten Inhalte in HTML. Über die Funktion „createElement()“ können nun die entsprechenden HTML-Eemente erzeugt werden, die für die Darstellung der Bilder benötigt werden. Hier sollte jeder selbst entscheiden, mit welchen Elementen er eine Ansicht der Galerie auszeichnet. Daher wird dieser Bereich an dieser Stelle ausgespart. Gestaltet wird das Ganze dann per CSS.

Wer sich nicht die Mühe machen möchte, selbst zu programmieren, kann sich auf der SwipeView-Seite den Quelltext in der Demo anschauen. Ist die HTML-Umsetzung der Galerieinhalte geregelt, ist die Galerie einsatzfähig.

Fazit: SwipeView ist eine schöne Sache. Der Nachteil ist, dass man vieles noch per Handarbeit selbst einstellen und coden muss. Dafür ist SwipewView allerdings sehr flexibel einsetzbar. SwipeView läuft auf dem iPhone ab Version 4, auf dem iPad ab Version 3.2 sowie auf Android-Geräten ab Version 2.3 – und in den gängigen Desktop-Versionen von Firefox, Safari und Opera ohnehin.

(dpe)