En este tutorial vamos a crear una galería de pantalla completa con jQuery. La idea es tener una miniatura de la imagen en pantalla completa se muestra actualmente en el lado que voltea al navegar a través de las imágenes. Vamos a añadir controles de navegación para la rueda del ratón y de las teclas.
La miniatura tendrá un zoom y una opción de pantalla completa y, por lo que la imagen en el fondo aparece en el modo de pantalla completa o como una imagen completa, cambia de tamaño para caber en la página.
Vamos a utilizar Flip! , un plugin de jQuery por Lucca Manno que voltea elementos.
Esta permite navegar entre las imágenes usando la rueda del ratón, las teclas de dirección del teclado, además posee botones para avanzar o retroceder y zoom de la imagen principal.
Sin dudas los efectos de animación son lo que impactan primero y luego todas las opciones que ofrece la interfaz para controlar la visualización. Sin dudas, hace sólo unos años atrás, hubiera sido impensable un desarrollo así bajo Javascript, algo de esta tipo era sólo posible con tecnología Flash.
Implementación
Ésta implementación es muy sencilla de comprender, pero en realidad, sólo es necesario descargar el demo funcional y reemplazar las imágenes por las que queramos mostrar. El demo viene en un archivo ZIP que contiene todo lo necesario para correrlo en el navegador sin necesidad de montarlo en un servidor web. Para mostrar nuestras propias imágenes, solo tenemos que sustituir las imágens que están en la carpeta images por las nuestras, además de renombrarlas según el nombre que usemos en el HMLT.
Te recomiendo le des una mirada al demo y te aseguro que quedaras sorprendido
Y eso es todo! Esperamos que hayan disfrutado el tutorial y de aprender algo nuevo hoy, deje su comentarios y recuerden darle LIKE y COMPARTIR.
