Advertisement
  1. Code
  2. JavaScript

Mejores plugins de lightbox jQuery para hacer que tu página destaque

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Disponer de imágenes y videos vibrantes para mostrar los productos y servicios de tu empresa es de gran ayuda. Por ejemplo, en el caso de un hotel, resulta mucho más impactante para los visitantes ver imágenes de diferentes habitaciones, la piscina y otros servicios que el hotel ofrece en lugar de ser recibidos por un muro de texto.

Ofrecer una gran cantidad de imágenes a la vista de los visitantes es una buena estrategia para demostrar lo impresionante que es tu producto o servicios, aunque también pueden ser elementos algo distractores. Es posible que las imágenes individuales y otros elementos no reciban tanta atención como se merecen debido a que compiten con otros vibrantes elementos repartidos por toda la página web.

Aquí es donde las "cajas de luz", conocidas como lightboxes, juegan un papel importante. Son una excelente forma de centrar la atención de los visitantes de tu sitio web sobre una imagen o elemento en particular perteneciente a una galería o portafolio haciendo que emerja al mismo tiempo que se atenúa el resto de la página web hasta que el usuario decida lo contrario.

El único problema es que por ahí existen miles de plugins de lightbox y puede resultar complicado seleccionar el que te vaya a ofrecer el mejor servicio.

¡Nosotros podemos ayudarte con esta decisión! Para que te sea más fácil elegir el mejor plugin lightbox a añadir a tu sitio web, hemos creado un listado con los 5 mejores plugins de lightbox de 2019. Este artículo cubrirá todas sus características en profundidad para que puedas tomar una decisión informada sobre cuál utilizar en tu sitio web.

1. LC Lightbox

El primer plugin de nuestra lista es LC Lightbox. Tiene todas las características que cabría esperar en un plugin de lightbox y muchas más.

LC Lightbox

Estas son algunas de sus características comunes:

  • Puedes crear presentaciones de diapositivas para recorrer todas las imágenes. La proyección de diapositivas se puede inicializar de forma manual o automática.
  • Puedes tener un título, una descripción y un autor independientes asociados a cada imagen o elemento.
  • Viene con navegación mediante miniaturas y la capacidad de compartir los elementos en las redes sociales.

Casi todos los plugins de lightbox son compatibles con las funciones que mencioné anteriormente. Lo que hace que LC Lightbox sea único e impresionante son sus características adicionales como por ejemplo:

  • La capacidad de mezclar múltiples tipos de contenido como imágenes y vídeos de YouTube, Vimeo, Dailymotion e iframes u otros elementos HTML.
  • Proporciona un botón de descarga directa que no se basa en scripts del lado del servidor. Esto es particularmente útil si deseas que los visitantes puedan descargar cualquier archivo de imagen que les guste.
  • Es compatible con el ratón, así como la navegación basada en teclado.
  • El plugin ha sido desarrollado teniendo en mente el pase de las diapositivas mediante gestos táctiles. Los usuarios podrán usar gestos de deslizamiento y pellizcar al usar este plugin lightbox en teléfonos inteligentes.

Y por si esas características no fueran suficientes, LC Lightbox tiene características aún más impresionantes que cambian el juego:

  • Puedes asignar a cada elemento del lightbox su propio enlace directo.
  • Los visitantes pueden hacer zoom progresivo de cualquier imagen que les guste usando gestos de doble clic o pellizcando.
  • ¡Incluso puedes integrar comentarios con todos tus elementos usando Facebook o Disqus!

Esto ha sido un largo listado de características, pero créeme cuando digo que todavía he dejado fuera algunas con el fin de mantener la brevedad del artículo. Puedes consultar todas las características de LC Lightbox en su página de vista previa en vivo.

Échales un vistazo y prueba las diferentes opciones de configuración para ver lo bueno que es realmente este plugin.

2. Portafolio y lightbox Bootstrap responsivo

Si estás administrando un sitio web que basado en el framework Bootstrap, este plugin sería la mejor opción para integrar un lightbox.

Bootstrap Portfolio and Lightbox

Aprovecha la funcionalidad ya integrada en Bootstrap para mantener la ligereza del plugin y la riqueza en características al mismo tiempo. Es totalmente compatible con Bootstrap 3 y Bootstrap 4.

Estas son algunas de las características que lo convierten en la opción perfecta para sitios web construidos sobre Bootstrap:

  • El plugin te permite mostrar diferentes elementos como imágenes y vídeos en un sistema de cuadrícula formado por 2, 3, 4, 5 o 6 columnas.
  • Aprovecha el carrusel incorporado en el framework para implementar uno propio. Puedes verlo en acción en acción en la página de la vista previa en vivo.
  • La responsividad de Bootstrap también está presente en este plugin. En consecuencia, el lightbox se ve bien tanto en dispositivos móviles, como en tabletas, o equipos de sobremesa.

Entre algunas otras características que hacen que este plugin sea increíble están las siguientes:

  • Seis carruseles de contenido distintos en los que puedes mostrar desde imágenes y vídeos hasta páginas de un eCommerce y entradas de blog
  • Ejemplos listos para usar con diseños únicos que te ayudarán a ponerte en marcha lo más rápido posible
  • Los esquemas de color se pueden combinar para asegurarte de que el aspecto del lightbox se adecúa perfectamente con el resto del sitio web
  • Vídeos incrustados de YouTube o Vimeo, o autoalojados

Hasta el momento, todas las personas que han calificado Responsive Bootstrap Portfolio and Lightbox le han dado 5 estrellas. Asegúrate de echar un vistazo a las demostraciones y observa por ti mismo por qué este plugin ha recibido tan altas calificaciones.

3. Galería de miniaturas JQuery con lightbox

En el paquete de este plugin encontramos una bonita galería de miniaturas con un lightbox. Podrás añadir fácilmente imágenes y vídeos de diferentes proporciones de aspecto y dimensiones en tu galería, el plugin los gestionará perfectamente.

jQuery Lightbox

Estas son algunas de sus características que podrían gustarte:

  • El plugin es fácil de configurar. Por lo tanto, conseguirás tener una galería de lightbox totalmente funcional en poco tiempo.
  • Para presentar tus imágenes y vídeos puedes elegir entre un diseño basado en cuadrícula o en un diseño que ocupe una única línea.
  • El desplazamiento entre diferentes elementos de la galería puede ser controlado con un simple gesto de desplazamiento o mediante botones de desplazamiento.
  • Puedes alinear horizontal o verticalmente las miniaturas que aparecen acompañando el lightbox.

Aquí tienes algunas otras características que mejoran la usabilidad de este plugin:

  • La navegación basada en teclado hace que sea muy fácil navegar a través de todos los elementos cuando el cambio del tamaño y la proporción de las imágenes y los vídeos hagan que los botones de navegación de la caja de luz se desplacen.
  • También tienes acceso a diferentes métodos públicos y devoluciones de llamada para alternar las presentaciones de las diapositivas, actuar en base a eventos como cuando el ratón está sobre las miniaturas o éste sale de ellas, etc.

Cuando pruebes diferentes demostraciones, probablemente notarás que este plugin ofrece estilos mínimos para la galería o el lightbox. Esto puede ser algo positivo si deseas tener un control total sobre él y asegurarte de que nada parezca quedar fuera de lugar.

4. Lightbox adaptable Boxaroo

El plugin Boxaroo Adaptive Lightbox también ofrece gran cantidad de características que lo convierten en un impresionante plugin de lightbox. Si quieres añadir animaciones y efectos interesantes a tu lightbox, este es el plugin que deberías usar.

Boxaroo Lightbox

Aquí tienes un breve listado de sus útiles características:

  • Las animaciones se aceleran mediante hardware para aprovechar al máximo la GPU y ofrecerte un óptimo rendimiento.
  • Los lightboxes que crees pueden gestionar fácilmente diferentes tipos de contenido que van desde videos de Vimeo hasta juegos flash interactivos.
  • El plugin es totalmente responsivo y ha sido diseñado de tal manera que se escala perfectamente de acuerdo con el dispositivo.
  • El plugin reduce grácilmente el rendimiento y otras características para mantener la compatibilidad del lightbox con navegadores tan antiguos como IE7.

Además, aquí tienes algunas características que hacen único a Boxaroo entre todos los plugins listados en esta página:

  • Viene con 70 diferentes artículos de GraphicRiver, ¡su valor en conjunto es de $287! En esto se incluyen fondos y flechas para proporcionarle a Boxaroo un aspecto profesional y único.
  • El plugin admite la aplicación independiente de estilo a los elementos, como por ejemplo, los subtítulos, animaciones, la visibilidad, la escala y la posición.
  • Puedes controlar de forma independiente los botones de cierre, los botones de pase a la diapositiva anterior y siguiente para cada lightbox.
  • Puedes crear un fondo interesante para tu lightbox utilizando imágenes, mosaicos y colores animados.
  • Tienes control total sobre las sombras y los resaltados, incluyendo el color, el radio, etc.

Simplemente, echa un vistazo a las demostraciones disponibles en el sitio web del plugin, no te decepcionarán.

5. ModuloBox: Plugin NextGen Lightbox JavaScript

ModuloBox es un plugin lightbox responsivo que se centra en proporcionar el mejor rendimiento y al mismo tiempo darle una gran cantidad de avanzada funcionalidad.

ModuloBox NextGen Lightbox

Aquí tienes una lista de características que hacen que este plugin sea impresionante:

  • Además de imágenes, puedes añadir vídeos, iframes u otro contenido HTML5.
  • Viene con soporte para los gestos táctiles como el doble toque y el pellizco. Los usuarios de dispositivos móviles se sentirán como en casa.
  • También puedes navegar a través del lightbox mediante un teclado o el ratón.
  • También admite el uso de varias galerías en una misma página.
  • Puedes navegar a través de la galería con la ayuda de las miniaturas. También viene con un modo a pantalla completa para proporcionar una experiencia inmersiva y un modo de presentación de diapositivas para desplazarte automáticamente a través de todas las imágenes.
  • El plugin también es compatible con el diseño RTL que invertirá la dirección de todas las animaciones y el sentido de lectura de los subtítulos.

ModuloBox tiene mucho más que ofrecer y puedes consultar todas sus características en la página del producto.

Conclusión

Cada uno de los plugins lightbox que hemos enumerado en esta página tiene fortalezas únicas que los hacen perfectos para situaciones concretas.

  • Si deseas un plugin que venga con un amplio conjunto de características que vayan desde la navegación mediante miniaturas a la integración de comentarios, deberías considerar el uso de LC Lightbox.
  • Si tu sitio web está basado en el framework Bootstrap, el uso de un plugin como Responsive Bootstrap Portfolio and Lightbox te ayudará a aprovechar todas las características del framework.
  • Aquellos que busquen algo que sea fácil de personalizar encontrarán que el plugin JQuery Thumbnail Gallery with Lightbox es la elección más adecuada.
  • Para aquellos que deseen disponer sofisticadas animaciones y efectos incorporados en su lightbox, Boxaroo sería perfecto.
  • Por último, ModuloBox servirá bien a aquellas personas que necesiten soporte RTL en su Lightbox.

También puedes echar un vistazo a algunos de los muchos otros plugins disponibles en Envato Market si ninguno de los plugins enumerados en esta página parecen ser el adecuado para tu proyecto. ¿Qué plugin lightbox te gusta más? Cuéntanoslo a través de un comentario.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.