Cree Lightbox responsivo y hermoso de página completa con BaguetteBox.js

Existen docenas de plugins lightbox y todos son geniales por diferentes razones. Algunos funcionan mejor en los sitios de cartera, mientras que otros son mejores para diseños sensibles.

Pero, uno de mis nuevos plugins favoritos para usar es baguetteBox.js, creado por el desarrollador de JavaScript Marek Grzybek.

Por supuesto, este complemento es totalmente gratuito de usar y de código abierto en GitHub si desea ingresar el código manualmente.

La biblioteca no tiene dependencias, para que puedas ejecutarlo sin jQuery, Zepto o cualquier otra cosa. Es un Biblioteca de JavaScript pura con una configuración muy simple.

Esta destinado a funciona perfectamente en dispositivos móviles, por lo que puede admitir deslizadores y toques, junto con el comportamiento predeterminado en equipos de escritorio y portátiles. Es una de las pocas galerías de pantalla completa que admite interacciones móviles, junto con un efecto modal completo.

Revisar la página de demostración Para verlo en vivo en acción. Cuenta con una galería completa, junto con el Se requiere una línea de código para que funcione:

 baguetteBox.run ('. baguetteBoxOne'); 

Así que esto se dirige a un elemento contenedor con la clase .baguetteBoxOne y toda la galería trabaja fuera de eso.

Tú podrías establecer opciones personalizadas si desea cosas como leyendas, estilos de botones, funciones de precarga y métodos de devolución de llamada para eventos onclick / onchange. Todas estas opciones son bien documentado en GitHub si quieres bucear.

Pero, realmente no se necesita mucho para que esto vaya más allá de un elemento contenedor y algunos elementos de imagen básicos..

Tú tener control total sobre las animaciones, tamaños de imagen, efectos de barrido y contenido de la galería, como títulos / títulos. Esta requiere JavaScript, por lo que no tiene una alternativa CSS pura a la modal. Pero, como la mayoría de los navegadores admiten JavaScript, no debería ser un problema..

Para obtener más información, visite la página principal de baguetteBox.js y también puede compartir sus opiniones con el creador en Twitter @feimosi.