Quiero compartir un pequeño experimento con los lectores de Tutorialzine - TouchTouch. Es un complemento de jQuery que convierte una colección de fotos en una página web en una galería móvil compatible con el tacto. Funciona en todos los principales navegadores (excepto IE7 e inferior) y, lo que es más importante, está diseñado específicamente para iOS y Android.
Destacados
- Animaciones y transiciones CSS3 fluidas;
- Una interfaz CSS receptiva que llena la pantalla y responde a los cambios en la orientación del dispositivo;
- Precarga fotos solo cuando son necesarias;
- Admite deslizar fotos;
- Muestra flechas en pantalla y escucha las pulsaciones de teclas de flecha en navegadores de escritorio;
TouchTouch se basa completamente en CSS3 para las animaciones, lo que significa que las transiciones son más fluidas en los dispositivos móviles (naturalmente, esto también significa que no verá ninguna en los navegadores más antiguos). Con un poco de CSS inteligente, la interfaz se ajusta automáticamente al tamaño y la orientación del dispositivo, y las fotos crecen para llenar el estado de la pantalla disponible (pruébalo cambiando el tamaño de la ventana del navegador). Y con la ayuda de jQuery, pasar las fotos se hace deslizando el dedo hacia la izquierda o hacia la derecha.
En el escritorio, obtienes la misma interfaz receptiva y animaciones fluidas. La navegación por la galería se realiza con las flechas en pantalla o con las teclas de flecha del teclado.
Cómo usar
Usarlo es simple. Suelta el touchTouch carpeta (puede encontrarla en la descarga en assets/ ) en algún lugar del árbol de carpetas de su sitio web. Después de esto, incluya touchTouch/touchTouch.css en tu
y touchTouch.jquery.js justo después de la biblioteca jQuery. El script depende de jQuery 1.7 o superior.Después de hacer todo esto, simplemente llame a la galería como un complemento jQuery regular:
$(function(){
// Initialize the gallery
$('#thumbs a').touchTouch();
}); Debe pasar elementos de anclaje que apunten a imágenes en sus atributos href para que la galería funcione. Además de transmitir qué imágenes se mostrarán en la galería, esto también proporciona una alternativa elegante en caso de que JavaScript no esté disponible.
Siguiendo la tradición de Tutorialzine de publicar recursos de calidad para desarrolladores, el código fuente de la galería se comenta ampliamente y se publica en Github.