Drupal 7, Hammer.js und Touch Swipe Pager
Ein Methode um mit Hammer.js den Views Pager von Drupal mittels Touch-Gesten zu steuern.
Als Beispiel stelle man sich eine in Drupal 7 erstellte View vor die z.B. eine kleine Bildergalerie darstellt. Hier wird nicht die Views Slideshow benutzt sondern der Views Mini-Pager und Ajax ist aktiviert. Man hat also das bekannte: "previous (1 von N) next"
Auf touchfähigen Geräten macht es mehr Sinn mit dem Finger von links nach rechts zu wischen um das nächste Bild anzuzeigen bzw. anders herum.
Um das zu erreichen kann man Hammer.js einbinden - entweder direkt in der .info Datei oder mittels dem Modul Library Pack. Wichtig ist das Hammer.js nur ab der Jquery Version 1.8 zu funktioniert also muss Jquery 1.8 installiert werden. Das kann man aktuell (Stand Februar 2013) mit der Dev Version von Jquery Multi machen.
Nachfolgend nun ein Codeschnipsel den man in seine Javascript Datei im Theme Ordner einbinden kann. Den Pager kann man dann noch mittels CSS auf den Touchfähigen Geräten ausblenden und schon kann der Benutzer wunderbar mit dem Finger durch die Bilder "swipen"
jQuery(document).ready(function($) { $(".MEINSELCTOR").hammer({prevent_default:false}).on("swipe", function(ev) {
if (ev.direction == "left") {
jQuery(".MEINSELCTOR").find(".pager-next").find("a").click(function(){return true;}).trigger("click");
}
else if(ev.direction == "right") {
jQuery(".MEINSELCTOR").find(".pager-previous").find("a").click(function(){return true;}).trigger("click");
}
});
});
Mit Hammer.js können natürlich auch noch viel mehr Touchgesten abgefragt werden.
Hammer.js sieht nach einer vernünftigen Lösung aus um Bedinkonzepte auf Touchfähigen Geräten umzusetzen. Zudem ist es mit nur 20kb ein echtes Leichtgewicht.