Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Essentials » SwipeView: Mobile Bildergalerie mit Gesten-Steuerung für Smartphones und Tablets

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 9. Oktober 2012
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

DAZECON – Webdesign und Marketing

Dresden

Carmen Hurst | Webdesign

Bad Homburg

pictibe – Werbeagentur & Marketingagentur

Köln

Warscher – Digital Experts

Horgen

dskom GmbH (SEO Profi Berlin)

Berlin

Alle Agenturpartner

Jobs

Junior Media Manager

München

System Engineer – Managed Service

Karlsruhe

Media Manager in München

München

Junior SEO Manager in München

München

Junior Webdesigner/ Mediengestalter

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

SEO Tools im Test: Das kann die OSG Performance Suite

Jedes SEO-Tool hat seine Berechtigung, Stärken und Schwächen. Manche Tools decken nur einen kleinen Bereich ab, andere verfolgen den All-in-One-Anspruch. Die OSG Performance Suite ist sehr umfangreich, wie unser Test ergab. Doch schau selbst:

 →   

0 Antworten zu „SwipeView: Mobile Bildergalerie mit Gesten-Steuerung für Smartphones und Tablets“
— was ist Deine Meinung?

  1. Hallenstein sagt:
    10. Oktober 2012 um 10:12 Uhr

    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 😉

    Antworten
  2. MaWoSch sagt:
    9. Oktober 2012 um 13:54 Uhr

    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?

    Antworten
  3. Johannes sagt:
    9. Oktober 2012 um 10:29 Uhr

    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?

    Antworten
    1. Andre sagt:
      9. Oktober 2012 um 10:45 Uhr

      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.

      Antworten
      1. Johannes sagt:
        9. Oktober 2012 um 12:32 Uhr

        Vielen Dank für deine Antwort Andre

        Antworten
  4. Andre sagt:
    9. Oktober 2012 um 9:59 Uhr

    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é

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.