Lightbox de imagen adaptable simple-SimplBox. js

Vista prévia

Descripción

SimplBox. js es una biblioteca de JS independiente para mostrar sus imágenes en una caja de luz totalmente sensible y táctil, con cargador de imágenes, superposición de pantalla completa y leyenda de la imagen.

Uso básico

Agregue un vínculo con el atributo Data-simplbox a la miniatura. Utilice < atributo href de una etiqueta > para definir la versión grande de la imagen.

<a href="full.jpg" data-simplbox="demo">


<img src="thumbnail.jpg" alt="My image description that will be used"/>
</a>

Incluya el script simplbox. js en el documento.

<script src="js/simplbox.min.js"></script>

Inicializa el lightbox con un poco de JavaScript.

var A = new SimplBox(document.querySelectorAll("[data-simplbox='demo']"), {

OPTIONS HERE
});
A.init();

El CSS requerido para quitar el retardo 300ms en los dispositivos táctiles.

html {

-ms-touch-action: manipulation;

touch-action: manipulation;
}

El CSS de ejemplo para el estilo del lightbox.

#simplbox {

z-index: 10000;

ms-touch-action: none;

touch-action: none;

-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);

-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);

box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
}

Opciones disponibles.

• imageElementId: "simplbox" : Name que se asignará al elemento de imagen creado como ID.
• fadeInDistance: 100 : la distancia que se utilizará para el desvanecimiento cuando se navega entre las imágenes a través del teclado o la pantalla táctil.
• animationSpeed: 350 : la velocidad de animación que se utilizará cuando la imagen se desvanezca.
• imageSize: 0,8 : se utiliza cuando la imagen es más grande que la ventana gráfica del usuario que es la imagen es más grande que la pantalla del dispositivo y por lo tanto se reducirá verticalmente por este multipler.
• quitOnImageClick: true : variable booleana si se deja de hacer clic en la imagen o no.
• quitOnDocumentClick: false : variable booleana si se cierra al hacer clic en el documento o no.
• enableKeyboard: true : variable booleana si se habilita la compatibilidad con el teclado para navegar por las imágenes o no.
• onImageLoadStart: function () {} : función a la que se llamará cuando se inicie el almacenamiento en caché de imágenes y el proceso que aparece.
• onImageLoadEnd: function () {} : función a la que se llamará cuando la imagen se haya almacenado en caché y aparezca en la pantalla del dispositivo.
• onStart: function () {} : función a la que se llamará cuando aparezca Lightbox en la pantalla del dispositivo.
• onEnd: function () {} : función que se llamará cuando lightbox desaparezca de la pantalla del dispositivo.