Plugins de Lightbox

Estoy seguro que has tenido que utilizar Lightboxes en más de un proyecto. Si utilizas algún CMS, seguro que te has encontrado con plugins o módulos con la funcionalidad del lightbox, preparados ya para implementar en el proyecto. A veces estos plugins no funcionan correctamente y te toca a ti desarrollarlos. Conocer las diferentes alternativas de lightbox de JQuery/Javascript existentes en el mercado, puede ayudar a la hora de desarrollar.

¿Qué es un Lightbox?

Lightbox es una aplicación desarrollada en JavaScript, usando el modelo de modal dialogs, que ha ganado popularidad gracias a su forma sencilla, pero elegante de mostrar imágenes en un sitio web. Lightbox permite a los usuarios ver una versión ampliada de la imagen sin la necesidad de ir a otra página. Además de imágenes también permite ver videos y otros tipos contenidos.

Te dejo 7 de los plugins de lightbox que me parecen más interesantes y maduros, y sus características.

Image Lightbox

Image Lightbox es un plugin responsive y con interfaz amigable al tacto.

Características

• Ascético. Sin leyendas, ni botones de navegación por defecto. Nada que pueda distraer el usuario de su principal objetivo.
• Minimalista. Solo tiene un fichero fuente con 4Kb de tamaño cuando minimizado. Solamente utiliza elemento .
• Extensible y configurable. Utilizando funciones personalizadas de JavaScript puedes ampliar las funcionalidades del plugin.
• Responsive y amigable al tacto.  Las imágenes se adaptan a los diferentes dispositivos y navegadores, y también responden al comportamiento nativo de los dispositivos táctiles.
• Compatible con iOS, Android y Windows Phone. También es compatible con todos los navegadores modernos.
• Compatible con Jquery 1.x y 2.x.
• Pre-carga la siguiente imagen.
• Utiliza las transformaciones y transiciones de CSS3.
• Interactúa con el teclado.

Flip Lightbox

Flip LightBox es un plugin responsive de jQuery.

Características 

• Fácil de implementar. No requiere hojas de estilos, scripts o bibliotecas adicionales.
• Efecto flip.
• Barra de texto y navegación en el pié de página.

Smoothbox

Smoothbox es un script de lightbox simple, ligero, responsive y muy fácil de utilizar. 

Características

• Ligero. ¡Solo pesa 1.7Kb!
• Pre-carga las imágenes
• Desarrollado en galería para multiple items.
• Transiciones de CSS3.
• Imágenes adaptativas.
• Funciona en todos los navegadores modernos.
• No funciona en el Internet Explorer 7 y versiones anteriores.

VenoBox

Venobox es otro plugin responsive de jQuery para lightbox, que se puede utilizar para imágenes, contenido alineado, iFrames, Google-Maps, peticiones a Ajax y videos del Youtube y Vimeo. 

Caracteristicas

• Calcula el ancho máximo de la imagen mostrada y preserva su altura si es más alta que la ventana.
• En dispositivos pequeños permite desplazarse hacia abajo

Fresco

Fresco se define como el primer lightbox realmente responsive. La verdad es que sus desarrolladores han conseguido un buen resultado. Además funciona en todos los navegadores y dispositivos. 

Características 

• Zoom y pantalla completa
• Skins retina-ready
• Permite desplazar los elementos, utilizando el evento swipe
• Integración con Youtube y Vimeo para videos HTML5
• Poderosa API de JavaScript

BaguetteBox 

BaguetteBox es un script de lightbox sencillo y fácil de usar escrito en JavaScript puro. Es responsive.

Características

• No tiene dependencias. Escrito en JavaScript puro.
• Soporta múltiple galerías. Cada una con opciones personalizadas.
• Soporta dispositivos touch-screen y desplazaimento.
• Leyendas
• Transiciones CSS3
• Botones SVG
• Tamaño de 1.9KB minimizado.

SimplBox

SimplBox es otro lightbox responsive y touch-friendly escrito en JavaScript puro. 

Caracteristicas 

• No depende de bibliotecas de terceros, como jQuery. Escrito en Javascript puro.
• Compatible con Windows Phone 7/8/8.1, Android y iPhone.
• Relativamente ligero. Minimizado pesa 2.42KB.
• Utiliza aceleración de hardware para las animaciones. Funciona en el Internet Explorer 8.

Como puedes ver, opciones no faltan. En la red puedes encontrar muchos más plugins del estilo. Cual utilizar, depende de ti y de tus necesidades.

¿Has desarrollado con algunos de estos scripts? ¿Cual ha sido tu experiencia?

Fuentes

• 20 Best Responsive Image Lightbox jQuery Plugins