Biblioteca lightbox personalizable multi-media-lightbox. js

Vista prévia

Descripción

La biblioteca de JavaScript lightbox. js permite mostrar contenido multimedia (imágenes, texto, vídeos de YouTube/Vimeo, etc.) en un elegante diálogo modal. También es compatible con el modo de galería que le permite navegar a través del contenido multimedia en el lightbox.

Funcionamiento

Importe lightbox. CSS y lightbox. js al documento HTML.

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

Habilite un elemento desencadenante para lanzar un lightbox de imagen.

<a href="1.png" data-lightbox data-image-alt="Image Desc">

 Image Lightbox
</a>

Habilite un elemento desencadenante para lanzar una lightbox de vídeo de YouTube o Vimeo.

<a href="https://vimeo.com/VIDEO ID" data-lightbox>

 Vimeo Lightbox
</a>

 <a href="https://www.youtube.com/watch?v=VIDEO ID" data-lightbox>

 Youtube Lightbox
</a>

Habilite un elemento desencadenante para iniciar lightbox que cargue contenido modal desde elementos insertados como estos:

<a href="#modal" data-lightbox> Modal </a>

<div id="modal" hidden>

<div class="modal-content">


<h3>Welcome!</h3>

</div>
</div>

Para crear un lightbox de galería para las imágenes agrupadas:

<a href="1.png" data-lightbox="gallery" data-image-alt="Image 1">

<img src="thumb-1.png" alt="Thumbnail 1">
 </a>

<a href="2.png" data-lightbox="gallery" data-image-alt="Image 2">

<img src="thumb-2.png" alt="Thumbnail 2">
 </a>

<a href="3.png" data-lightbox="gallery" data-image-alt="Image 3">

<img src="thumb-3.png" alt="Thumbnail 3">
 </a>

Registro de cambios

10/30/2018

• Renderiza el lightbox justo después del elemento que lo activó

07/04/2018

• actualizar

06/21/2018

• Agregar opción para desencadenar mediante programación el lightbox
• Quite los prefijos de proveedor innecesarios

06/20/2018

• Agregar opción para desencadenar mediante programación el lightbox