Biblioteca de Galería lightbox elegante de imagen flexible-lightbox V

Vista prévia

Descripción

Lightbox V es una galería de imágenes de JavaScript de dependencia cero & plug-in lightbox que funciona con imagen única y agrupada.

Características

• Totalmente receptivo y cruzado.
• Permite alternar entre las imágenes en el lightbox.
• Proporciona un icono "expandir" que expande la imagen al tamaño completo.
• Bucle infinito.
• Admite subtítulos de imagen.
• Fácil de implementar con atributos de datos.

Funcionamiento

Enlace al plugin de lightbox V en JavaScript y StyleSheet.

<link rel="stylesheet" href="dist/css/lightboxV.min.css">
<script src="dist/js/lightboxV.min.js"></script>

Añada la clase requerida lightbox-v a las imágenes y defina el título de la imagen en el atributo Data-title .

<a href="large.jpg" data-title="Image Caption" class="lightbox-v">

<img src="thumb.jpg">
</a>

Para aplicar el complemento lightbox a varias imágenes, asegúrese de que el atributo Data-lightbox-v tenga el mismo valor.

<a href="1.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v">

<img src="1.jpg">
</a>

<a href="2.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v">

<img src="2.jpg">
</a>

<a href="3.jpg" data-title="Image Caption" data-lightbox-v="gallery" class="lightbox-v">

<img src="3.jpg">
</a>

...

Para establecer el complemento, reemplace la configuración predeterminada según sus necesidades.

let lightBoxVOptions = {



// max width


maxWidth: 900,



// shows image count


imageCount: true,



// fade duration in milliseconds


fadeDuration: 10,



// shows border


border: true,



// infinite loop


noLoop: true,



// shows expand icon


expand: true,



// shows small arrows


arrowsSm: false

}

Registro de cambios

04/13/2019

• Ajustes de código.

03/15/2019

• Los estilos cambiaron.