SwipeView: Galería móvil con control táctil en teléfonos inteligentes y tabletas

JavaScript y galerías, ¿qué asocias? Asocio la palabra plétora. Aunque no es fácil impresionar con nuevos proyectos, SwipeView lo hace. Debido a que SwipeView es compatible con el control táctil, es ideal para usar en dispositivos móviles como tabletas y teléfonos inteligentes. Navegas a través de las galerías con golpes. Los dispositivos no móviles imitan los deslizamientos con las acciones del mouse. El proyecto incluso presenta conceptos de navegación clásicos.

Ejemplo de galería para SwipeView

DeslizarVer es un script, que viene independiente y no depende de uno de los marcos habituales como jQuery o MooTools. Desafortunadamente, la integración está un poco fuera de lo normal. Incrustar el script no funciona, también deberá incluir algunas líneas de JavaScript adicional. Esto es necesario para que la funcionalidad funcione. Los contenidos también se definen a través de JavaScript. El último punto genera una experiencia inusual: no define el contenido de la galería usando HTML, sino que lo hace usando JavaScript. No es precisamente complicado ni difícil, pero no es la forma habitual de hacerlo.

Marcado de navegación e imágenes, controlado por JavaScript

La parte HTML de la galería es bastante lúcida. JavaScript llena un contenedor con contenido. Y hay una lista para habilitar la navegación por la galería:

<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>

Además de incrustar la biblioteca SwipeView en el encabezado de su sitio, debe integrar un fragmento de JavaScript adicional justo después de los elementos HTML en la sección del cuerpo. De esa manera, el detector de eventos touchmoveque permite el control táctil, se llama y el gallery-objeto se define:

document.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);

var gallery, el, i, page, dots = document.querySelectorAll('#nav li'), slides = [
  {
    img: "pic1.jpg",
    width: 300,
    height: 200,
    desc: "description"
  },
… ];

gallery = new SwipeView('#content', { numberOfPages: slides.length });

Usando la matriz slides todas las imágenes de la galería aparecen en la lista. A continuación, mostramos el contenido a través de HTML. La función createElement() crea los elementos HTML correspondientes, necesarios para la presentación de las imágenes. El diseño se controla mediante CSS. Si eres del tipo perezoso, puedes consultar el código fuente de muestra en la página SwipeView. Después de establecer el HTML, la galería está lista para el horario de máxima audiencia.

Conclusión: DeslizarVer es bueno tener El principal inconveniente es la necesidad de definir manualmente esto y aquello, ni siquiera se puede evitar la codificación personalizada. Por otro lado, esto es lo que hace que SwipeView sea extremadamente flexible. SwipeView se ejecuta en iPhones desde la versión 4, en iPads desde la versión 3.2 y en Android desde la 2.3 en adelante. No hace falta decir que los navegadores de escritorio modernos son compatibles de todos modos.

(dpe)