Plugins jQuery responsive para añadir efecto lightbox a tus imágenes

0

El efecto lightbox es una de las técnicas más populares para enfocar la atención del usuario en cierto elemento. Usualmente se puede ver este efecto en imágenes y funciona de la siguiente manera: cuando el usuario pincha sobre alguna vista previa, se abre una especie de ventana modal con efecto de opacidad en el fondo. De esta manera, la atención del usuario se dirige a la ventana que se encuentra abierta. Seguramente ya estás familiarizado con este efecto, incluso se emplea en redes sociales como Facebook cuando pinchamos sobre alguna fotografía para poder ver los comentarios.

Puedes implementar el efecto lightbox en las imágenes y galerías de tu sitio web más rápidamente con el uso de plugins jQuery que, en esta oportunidad, te listamos. Los plugins son variados, existen desde los más simples hasta los que poseen diversas opciones de configuración. En esta lista hemos considerado los plugins jQuery que también se encuentran optimizados para dispositivos móviles.

PhotoSwipe

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-PhotoSwipe

PhotoSwipe es un plugin para incorporar galería de imágenes y se enfoca en dispositivos móviles. Ha sido creado teniendo como inspiración el visor de fotos de iOS. PhotoSwipe ofrece a los usuarios una interfaz intuitiva y les permite interactuar con las imágenes web desde su móvil. Es compatible con todos los gestos táctiles básicos para que el usuario pueda ver las diferentes imágenes de la galería, hacer zoom, etc.

iLightbox

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-iLightbox

iLightbox es un plugin que admite una gran cantidad de medios como videos, contenido Ajax, mapas y archivos SWF. También incluye botones de redes sociales para que tus usuarios compartan el contenido en plataformas como Facebook, Twitter y Reddit.

iLightbox es compatible con gestos táctiles y pantallas de retina, además posee opciones para pantalla completa y una API sencilla de emplear.

Lightbox for Bootstrap 3

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-LightboxforBootstrap3

Lightbox for Bootstrap 3 es un módulo creado para incluir imágenes, videos y añadir galerías en Bootstrap. Como su nombre indica, posee el estilo lightbox y necesita de jQuery y del componente para ventanas modales de Bootstrap. Si estás usando esta framework en tu proyecto, Lightbox for Bootstrap 3 puede ser una buena opción para crear galerías.

Image Lightbox

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-ImageLightbox

Image Lightbox es un plugin compatible con pantallas táctiles. Ha sido desarrollador especialmente para imágenes y no admite otros tipos de formatos como videos, así que utilízalo sólo si sabes que incluirás este tipo de archivos.

Image Lightbox incluye transiciones y transformaciones CSS y es compatible en sistemas iOS, Android y Windows Phone.

Mini Lightbox

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-MiniLightbox

Mini Lightbox es otro plugin ligero para crear galerías. Sólo es compatible con imágenes. Es perfecto para ti si sólo vas a incluir imágenes en tus galerías y puede que te ayude a minimizar recursos ya que pesa sólo 2 KB.

Swipebox

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Swipebox

Swipebox es un plugin compatible con pantallas táctiles, de modo que ha sido diseñada para plataformas móviles. No sólo puedes colocar imágenes sino también enlazar videos de Youtube y Vimeo.

Swipebox incluye transiciones CSS y compatibilidad con pantallas de retina. Además, puedes personalizarlo de forma sencilla mediante CSS. A pesar de que este plugin pone énfasis en los dispositivos móviles, es compatible con la navegación de teclado, de modo que los usuarios que acceden a tu sitio desde su ordenador pueden disfrutar de Swipebox sin problemas.

Lightcase

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Lightcase

Lightcase es un plugin desarrollado con jQuery que incluye animaciones para mejorar la interacción del usuario en el sitio. Admite diversos medios como videos de Youtube, videos HTML, archivos SWF y formularios.

Lightcase es un plugin bastante flexible, es de diseño responsive y se puede extender. Es compatible con los navegadores más comunes como Internet Explorer, Firefox y Google Chrome.

Yalb

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Yalb

Yalb (Yet Another Lightbox) es un plugin que posee diversas APIs. Éstas te permiten crear eventos personalizados para identificar los estados de la galería lightbox. Viene como un archivo de JavaScript o como un plugin jQuery, de modo que puedes usarlo con cualquiera de estos dos recursos.

Featherlight

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Featherlight

Featherlight es otro plugin de diseño responsive que pesa alrededor de 6 KB. Como es de esperarse, Featherlight incluye sólo las características esenciales. Para crear una galería deberás incluir la extensión respectiva o crear una extensión que se adecue a las necesidades de tu proyecto. Featherlight es intuitiva, admite imágenes, iFrames y contenido Ajax.

LightLayer

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-LightLayer

LightLayer es un plugin de diseño adaptativo que se centra en la experiencia de usuario. Con LightLayer tienes control sobre la configuración de la galería como el color de fondo y su opacidad, la posición de la ventana, transiciones, etc. A pesar de la gran libertad que ofrece, LightLayer es un plugin sencillo de usar. No sólo posee opciones para modificar el aspecto de tu galería, sino también para crear eventos personalizados. Puedes usar este plugin con imágenes, videos y mapas.

LightGallery

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-LightGallery

LightGallery es otro plugin que ofrece una serie de funciones que te permiten personalizar hasta el más mínimo detalle de tu galería. Funciona con imágenes y videos, es compatible con dispositivos móviles, posee efectos y transiciones. Adicionalmente, permite colocar leyendas y descripciones en cada imagen.

Strip

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Strip

Strip es un plugin con efecto lightbox que es un tanto diferente ya que no cubre la totalidad de la página, sino sólo una parte de la página. Esta es una alternativa para dar mayor espacio en pantallas grandes, como en ordenadores, por ejemplo. En dispositivos móviles ofrece el efecto ligthbox al que ya estás acostumbrado debido a que el tamaño de pantalla no permite hacer uso parcial de ella. Podría ser una opción interesante para tu proyecto.

Strip admite tanto archivos de audio como de video.

Fluidbox

plugins-jquery-anadir-efecto-lightbox-imagenes-galerias-Fluidbox

Fluidbox es un plugin que funciona con imágenes en diferentes estados como imagen flotante o imagen con posición absoluta. Su diseño ha sido creado en base a la galería lightbox de Medium, por ello se ofrece una interfaz libre de distracciones donde el usuario puede navegar de manera continua. Como es de esperarse, funciona a la perfección en móviles y se pueden colocar imágenes en alta resolución.

En conclusión…

Ahora poder implementar galerías que sean interactivas y no presente problemas de visualización es posible con los plugins jQuery que hemos mencionado. Todos ellos han sido optimizados para móviles, pero algunos presentan más características que otros, así que puedes usar cualquiera de ellos según el tipo de galería que estés pensando crear.

Hemos visto que no sólo puedes crear galerías de imágenes, sino añadir contenido variado a estas ventanas con efecto lightbox, de modo que es un gran recurso para cualquier galería web que desees crear.

Si conoces algún otro plugin jQuery para crear galerías con efecto lightbox, te invitamos a que nos lo indiques en un comentario.

Comparte este post.
Artículos Recomendados Para Tí:
>

CÓMO CREAR UN NEGOCIO RENTABLE COMO DESARROLLADOR WEB