Galería de lightbox animada suave en JavaScript puro-MVT-lightbox

Vista prévia

Descripción

MVT-LightBox es una librería JavaScript pura para mostrar sus imágenes en un Gallery lightbox popup que utiliza CSS3 para animaciones suaves y rápidas.

See also:

• Top 10 JavaScript & bibliotecas de lightbox de la Galería CSS

Funcionamiento

Cargue la hoja de estilos necesaria en el encabezado de la página HTML.

<link rel="stylesheet" href="mvt-lightbox.min.css">

Cargue el MVT-lightbox. min. js justo antes de la etiqueta del cuerpo de cierre.

<script src="js/mvt-lightbox.min.js"></script>

Agregue una lista de miniaturas junto con el lightbox que contiene imágenes más grandes a la Página Web de la siguiente manera:

<section data-lightbox="mvt-lightbox">

<ul class="mvt-thumbs-list">



<li>





<img src="1-thumb.jpg" alt="">



</li>



<li>





<img src="2-thumb.jpg" alt="">



</li>



<li>





<img src="3-thumb.jpg" alt="">



</li>



<li>





<img src="4-thumb.jpg" alt="">



</li>



<li>





<img src="5-thumb.jpg" alt="">



</li>



<li>





<img src="6-thumb.jpg" alt="">



</li>

</ul>

<div class="mvt-lightbox-overlay no-display"></div>

<div class="mvt-lightbox" data-show-id="">



<div class="mvt-img-list">





<img src="1.jpg" alt="">





<img src="2.jpg" alt="">





<img src="3.jpg" alt="">





<img src="4.jpg" alt="">





<img src="5.jpg" alt="">





<img src="6.jpg" alt="">



</div>



<div class="mvt-btn-close">





<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">







<title>Close</title>







<path d="M27.344,4.287 L23.531,0.474 L14,10.005 L4.469,0.474 L0.656,4.287 L10.187,13.818 L0.656,23.349 L4.469,27.162 L14,17.631 L23.531,27.162 L27.344,23.349 L17.813,13.818 L27.344,4.287 Z"></path>





</svg>



</div>



<div class="lightbox-nav-next">





<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">







<title>Next</title>







<path d="M181.683 512.5L96.35 427.203l170.632-170.67L96.352 85.868 181.68.5 437.65 256.534 181.682 512.5z" />





</svg>



</div>



<div class="lightbox-nav-prev">





<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">







<title>Previous</title>







<path d="M85.683,512.5 L0.35,427.203 L170.982,256.533 L0.352,85.868 L85.68,0.5 L341.65,256.534 L85.682,512.5 L85.683,512.5 Z" transform="translate(171.000000, 256.500000) scale(-1, 1) translate(-171.000000, -256.500000) "/>





</svg>



</div>

</div>
</section>

Inicializa la lightbox de la galería y listo.

document.addEventListener('DOMContentLoaded', function() {

mvt_lightbox(document.querySelector('[data-lightbox="mvt-lightbox"]'));
}, false);

Registro de cambios

07/03/2018

• Haga que el teclado lightbox sea accesible.

06/27/2017

• Reemplace la animación de atenuación de velocidad con animación CSS

06/01/2017

• Actualice la velocidad lib, limpie los archivos no utilizados. Quite mixin para los prefijos CSS. Actualiza el archivo JS con ES6 Let y const.