Gesture based events

Mobile browsing is een sterk stijgende trend aan het worden. De discussie of iedere website een aparte mobiele versie moet krijgen, laat ik even achterwege. Waarover ik het wel wil hebben, zijn de specifieke gewoontes die smartphone users hebben. Bladeren zijn bijvoorbeeld door hun foto's, dan doen ze dit door met een vinger over het scherm te vegen. Om in of uit te zoomen op een foto, knijp je met twee vinges de foto als het ware open of dicht. Gesture based events heet dat. Dit staat in schril contrast met hoe je een computermuis gebruikt, waarmee je eigenlijk alleen maar klikt. Tijd om mij eens te verdiepen in deze speciale manier van navigeren.

jQuery Touchwipe

Ik moest niet al te ver zoeken om informatie te vinden over dit onderwerp. Met de jQuery plugin Touchwipe is het mogelijk om vingerbewegingen te registreren en daaraan een actie toe te kennen. Het is, zoals dat wel meer het geval is met jQuery, zeer eenvoudig in gebruik.

$("#imagegallery").touchwipe({
wipeLeft: function() { alert("left"); },
wipeRight: function() { alert("right"); },
wipeUp: function() { alert("up"); },
wipeDown: function() { alert("down"); },
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: true
});

Je kunt de functies aanpassen aan jouw eisen. Wat ook handig is, is het feit dat je kunt instellen wat de minimumafstand is die je met je vinger moet afleggen om een event te triggeren. In het voorbeeld op jquery.com werd dit toegepast op de jQuery Cycle Plugin.

$(document).ready(function() {
$('div#controller').cycle({
fx: 'scrollHorz'
}); 
$("div#slides").touchwipe({
wipeLeft: function() {
$("#slides").jFlow
("jFlowNext");
},
wipeRight: function() {
$("#slides").jFlow
("jFlowPrev");
}
});
}); 

Tijd om dit om te zetten in de praktijk. Ik heb dit toegepast op de website van zoom-architecten (die architecten zijn zelf fervente iPhone gebruikers, dus zullen ze er zeker geen bezwaar tegen hebben :). In een oudere versie moest je telkens een foto aantikken met je vinger. Nu kun je, net zoals je doorheen foto's bladert op een iPhone, met je vinger over de foto's vegen.

De mobiele website van zoom-architecten maakte eigenlijk wel gebruik van jFlow, dus heb ik snel even de Cycle Plugin geïntegreerd. Surf je nu naar zoom-architecten.be met een iPhone, dan wordt je automatisch doorverwezen naar een website die speciaal gebouwd is voor dit toestel. Het is eigenlijk een vereenvoudigde versie van de website die snel toegang biedt tot alle projecten.

Is er dus een iPhone in de buurt, surf dan even naar zoom-architecten.be en blader doorheen de image galleries. Kies een project en veeg met je vinger over het scherm om naar de volgende of vorige foto te gaan. Je zal merken dat dit vrij goed werkt. Enjoy!