Design

Mobiles Webdesign: Per Gestensteuerung durch Bilder navigieren

12. Oktober 2012

Der gängige Weg, Bilder für die mobile Ansicht einer Website vorzubereiten, ist die Skalierung des Bildes auf die jeweilige Breite des Displays. Doch je nach Bildinhalt kann eine starke Verkleinerung des Bildes dazu führen, dass es – gerade bei Grafiken oder detailreichen Fotos – nicht mehr vernünftig wahrgenommen werden kann. Eine Alternative ist, das Bild nicht zu verkleinern, sondern per Gestensteuerung navigierbar zu machen. Wie das geht, zeige ich Ihnen im folgenden Beitrag…

Los geht’s: Das Bild für die mobile Ansicht aufbereiten

Im ersten Schritt muss das Bild per HTML und CSS so aufbereitet werden, dass es bei kleinen Auflösungen beschnitten wird. Dazu setzen wir um das Bild einen Container, der die Gesamtbreite des Displays annimmt und das Bild auf diese Breite beschneidet:

1
2
3
<div style="width: 100%; overflow: hidden">
  <img src="bild.jpg" width="800" height="400" alt="" id="bild" />
</div>

Um das Bild einfach per JavaScript ansprechen zu können, weisen wir dem Bild eine ID zu. So können wir bei Darstellung des Bildes auf einem Gerät, welches kleiner als 800 Pixel in der Breite auflöst, dafür sorgen, dass es am rechten Rand auf die Displaybreite beschnitten wird.

Der schwierigere Part: Gestensteuerung per JavaScript hinzufügen

Im nächsten Schritt fügen wir eine JavaScript-Funktion in den Head ein, welche die Gestensteuerung für das Bild ermöglicht. Voraussetzung ist, dass der Browser das Touch-Event kennt, was bei aktuellen Mobilbrowsern aber mittlerweile der Fall ist:

1
2
3
function gestensteuerung() {
 
  if ("ontouchstart" in document.documentElement) }

Um Fehler bei älteren Browsern zu vermeiden, fragen wir als erstes ab, ob der Event-Handler unterstützt wird. Es folgt die Funktion „bildausschnitt()“, welche dafür sorgt, dass sich durch die Gestensteuerung der Bildausschnitt ändert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    function bildausschnitt(ereignis) {
 
      ereignis.preventDefault();
      var bewegung = ereignis.touches[0];
 
      if (ereignis.type == "touchstart") {
 
        var start = bewegung.pageX;
 
      } else if (ereignis.type == "touchmove") {
 
        var distanz = start - bewegung.pageX;
        var position = document.getElementById("bild").offsetLeft - distanz;
        var distanz_max = -document.getElementById("bild").offsetWidth + document.getElementById("bild").parentNode.offsetWidth;
 
        if (position < 0 && position > distanz_max) {
          document.getElementById("bild").style.marginLeft = position + "px";
        }
 
      }
     }

Der Variablen „bewegung“ übergeben wir das Touch-Ereignis, welches für jeden Finger, der auf dem Display ermittelt wird, einen Wert in ein Array schreibt. Wir beschränken uns auf den ersten Finger („touches[0]“).

Im nächsten Schritt werden je nach Ereignistyp verschiedene Variablen gesetzt. „touchstart“ beschreibt den Moment, in dem der Bildschirm berührt wird, „touchmove“ den Moment der Bewegung auf dem Bildschirm. In beiden Fällen wird die Position des Fingers per „bewegung.pageX“ abgefragt – im Beispiel beschränken wir uns auf eine Steuerung auf der X-Achse. Bei „touchstart“  wird der Wert in der Variablen „start“ gespeichert.

Während der Bewegung misst das Script die Distanz zwischen „start“ und der aktuellen Fingerposition und speichert sie in der Variablen „distanz“. Die neue Position des Bildes (Variable „position“) ergibt sich aus der Differenz zwischen der aktuellen Bildposition, die mit „offsetLeft“ abgerufen wird, und dem Wert aus „distanz“.

Damit das Bild nie aus dem Display geschoben werden kann, wird eine maximale Distanz errechnet (Variable „distanz_max“). In der anschließenden „if“-Abfrage setzt man das Bild nur dann auf eine neue Position, wenn die Variable „position“ kleiner Null und größer „distanz_max“ ist.

Zuguterletzt muss die Funktion „bildausschnitt()“ noch dem Event-Listener zugewiesen werden, damit sie bei den entsprechenden Ereignissen auch startet:

1
2
    document.getElementById("bild").addEventListener("touchstart", bildausschnitt, false);
    document.getElementById("bild").addEventListener("touchmove", bildausschnitt, false);

Zudem fügen wir die Gesamtfunktion „gestensteuerung()“ dem Event-Listener hinzu, damit sie schon beim Laden der Seite startet:

1
window.addEventListener("load", gestensteuerung, false);

Fertig! Fortan können Bilder per Fingergeste gesteuert und müssen nicht zwingend verkleinert werden.

(dpe)

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Johannes
Gast
Johannes
3 Jahre 6 Monate her

Sehr interessant! Danke für den Tipp!

trackback
Kai Schwarzmayr
Gast
Kai Schwarzmayr
3 Jahre 6 Monate her

Hört sich gut an, ich bekomme es jedoch nicht zum laufen. Gibt es eine Demo dazu?

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen