Denis Potschien 9. Oktober 2012

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

6 Kommentare

  1. Hm, für diesen „simplen“ Anwendungsfall würde ich dann aber eher auf swipejs zurückgreifen. Ist hier auch schon mal vorgestellt worden. Trotzdem danke für den Tipp, wandert ins Plugin-Archiv ;-)

  2. Schaut auf den ersten Blick ganz gut aus. Mir fehlt da nur das responsive. In meinem Blog habe ich mich für den kostenpflichtigen RoyalSlider entschieden. Kann alles was ich brauche.
    Gibt es eigentlich schon ein FlexSlider 2 Plugin für WordPress?

  3. Das mit der Gestensteuerung für mobile Geräte ist natürlich klasse, aber was ist, wenn Javaskript nicht aktiviert ist? Und mit welchen Versionen vom Internet Explorer funktioniert diese Bildergalerie und funktioniert diese auf dem iPad 1 & 2 nicht?

    • Moin Johannes, wenn Javascript nicht aktiviert ist, dann musst Du dir eine Fallbacklösung bauen, so wie immer. Auf mobilen Endgeräten sollte die Javascript unterstützung nicht so das Problem sein, kann man da Javascript überhaupt deaktivieren?

      Und alles was neuer ist als der IE7 versteht Javascript auch ganz gut, die Problem der IE´s liegen eigentlich woanders… Und sonst testen.

  4. Moin..
    desweiteren möchte ich euch den FlexSlider ans Herz legen. Voll Responsive und mit Wischgesten steuerbar. Der FlexSlider frisst nicht nur Bilder sondern auch anderen Content ( z.B. Html). Mann kan ich also aich als „Newslider bzw. Contentslider“ nutzen.

    Mit etwas Wissen kann man den Flexslider auch in bestehende Module von CMSMS wie z.B. „Gallery“ oder „News“ oder „ListIt2“ integrieren. Bei WordPressmodulen geht das sicher auch, aber da fehlt mir das Wissen…

    Gruß André

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.