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

Tiempo de ejecución: 30 minutos. Empezar

Autor: hjb23
Views Total: 653
Sitio oficial: Ir a la web
Actualizado: April 3, 2019
Licencia: MIT

Vista prévia

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

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.

Te puede interesar: