Como tener gestos swipe en los slideshow con Drupal 7

A continuación explicaré sencillos pasos a seguir para agregar el ”plugin” de jQuery TouchSwipe para implementar funcionalidad de gestos en nuestro sitio, junto con este “plugin” mostrare una funcionalidad sencilla pero muy útil aplicando el plugin a un slideshow de jCarousel ya existente.

1. Requerimientos

Para esta implementación es necesario agregar el “plugin” TouchSwipe a nuestro sitio de Drupal. A continuación se presentan los pasos para agregar el “plugin” a un sitio Drupal.

Paso 1

Se debe descargar el “plugin” de jQuery desde el repositorio en GitHub https://github.com/mattbryson/TouchSwipe-Jquery-Plugin.

En este repositorio se pueden encontrar la versión compresa y regular del “plugin” así como documentación y demos de la utilización del mismo. Para nuestro objetivo bastará con descargar su versión compresa jquery.touchSwipe.min.js.

Paso 2

Se debe agregar el archivo del “plugin” dentro de una carpeta llamado “jquery.touchSwipe” dentro de la carpeta “libraries” que debe de encontrarse (o crearse de no existir) en la ruta: sites/all/libraries.

Paso 3

En el archivo .info del tema del sitio se debe agregar la referencia global al archivo de javascript del “plugin” de la siguiente forma:

scripts[] = ../../libraries/jquery.touchSwipe/jquery.touchSwipe.min.js

2. Implementación del “plugin”.

Creado un slideshow con el modulo jCarousel o Views Slideshow, y utilizando los controles de anterior y siguiente, se integraran con el TouchSwipe por medio del gesto con el dedo hacia la izquierda o derecha.

El siguiente ejemplo es de una implementación en específico con el módulo jCarousel, lo único que debería cambiar a otra implementación serian los selectores de los controles siguiente y anterior, así como la clase que identifica el contenedor de cada elemento “slide”, en este caso este contenedor es un “li” dentro de una lista no ordenada de elementos “ul”.

jQuery(".jcarousel-skin-default ul li").swipe({  
    swipe:function(event, direction, distance, duration, fingerCount) {
      if(direction == 'left'){
        jQuery('.jcarousel-skin-default .jcarousel-next-horizontal').click();
      }else if (direction == 'right') {
        jQuery('.jcarousel-skin-default .jcarousel-prev-horizontal').click();    
      }
    }
  });

Como se puede apreciar en el código lo que se realiza es la detección del sentido del gesto si es izquierda o derecha, y según este se realiza el llamado a la funcionalidad por defecto del botón de control siguiente o anterior, con esto se mantienen todo sus efectos así como transiciones y tiempos de ejecución.

Nota: Este “post” debería ser una solución para personas que necesiten implementar los “gestures” en proyectos que ya estan avanzados. Lo ideal cuando se puede realizar el slideshow desde el principio es utilizar ”FlexSlider” que ya contiene la solución “out of the box”.