Simple Galería lightbox con JavaScript y CSS3-baguetteBox. js

Vista prévia

Descripción

baguetteBox. js es una biblioteca JavaScript simple, ligera y amigable para móviles para mostrar una galería de imágenes en una caja de luz personalizable & totalmente adaptable. Puede navegar a través de las imágenes de la galería con flechas de navegación o gestos de deslizar en dispositivos táctiles.

Uso básico

Agregue el baguetteBox. CSS en la cabeza y el script baguetteBox. js al final del documento.

<link rel="stylesheet" href="css/baguetteBox.css">
<script src="js/baguetteBox.js" async></script>

Inserte un grupo de imágenes con miniaturas en un elemento contenedor para crear una galería. Use el atributo Data-Caption para agregar el título de la imagen para cada imagen.

<div class="demo gallery">

<a href="img/1.jpg" data-caption="Caption 1"><img src="img/thumbs/1.jpg"></a>

<a href="img/2.jpg" data-caption="Caption 1"><img src="img/thumbs/2.jpg"></a>

<a href="img/3.jpg" data-caption="Caption 1"><img src="img/thumbs/3.jpg"></a>
</div>

Inicialice la lightbox de la galería.

baguetteBox.run('.demo');

Opciones globales y sus valores predeterminados:

baguetteBox.run('.demo', {

captions: true, // display image captions.

buttons: 'auto', // arrows navigation

fullScreen: false,

noScrollbars: false,

bodyClass: 'baguetteBox-open',

titleTag: false,

async: false,

preload: 2,

animation: 'slideIn', // fadeIn or slideIn

verlayBackgroundColor: 'rgba(0,0,0,.8)'
});

Funciones de devolución de llamada disponibles.

baguetteBox.run('.demo', {

afterShow: null,

afterHide: null,

onChange: null
});

Registro de cambios

v1.11.0 (09/17/2018)

• Bugfix