"Gallery Light Box by Jizra" es una galería de imágenes responsive de tipo light box construida en Html 5, Css 3 y javascript.
Esta es la primera versión beta de esta galería por tanto cuenta con un funcionamiento muy básico, puede tener fallos y no funcionar en todos los navegadores.
1: Agrega la etiqueta de estilos entre tu etiqueta <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://kit.fontawesome.com/1f8614daef.js" crossorigin="anonymous"></script>
2: Agrega el maquetado html donde quieras poner tu galería
<div id="jd-cont__gallery" class="jd-cont__gallery center">
<img class="jd-front__img__gallery""
src=""
data-url-img=""
data-title-img=""
data-desc-img=""
>
</div>
3:Repite este fragmento dentro de la etiqueta <div id="jd-cont__gallery"> por cada imagen que quieras agregar
<img class="jd-front__img__gallery"
src=""
data-url-img=""
data-title-img=""
data-desc-img=""
alt=""
>
4: Agrega el Script antes del cierre de tu etiqueta </body>
<script src="https://jizradesign.github.io/releases/lightBox.min.js"></script>
5: Inicializar la galeria.
window.onload = (e) =>{
const gal = new Gallery("#jd-cont__gallery",".jd-front__img__gallery");
gal.newSet();
}
Atributos disponibles :
El atributo src de la etiqueta img muestra una imagen de 150px x 150px (es la imagen pequeña de la galería) Se recomienda su uso con imágenes pequeñas para cargar rápido
El atributo data-url-img muestra la imagen grande en el light box si esta imagen no se define cargara la imagen del atributo src
El atributo data-url-img puede estar vació pero no se debe eliminar data-url-img=""
El atributo data-title-img puede estar vació pero no se debe eliminar data-title-img="" este atributo esta encargado de mostrar el titulo de la imagen
El atributo data-desc-img puede estar vació pero no se debe eliminar data-desc-img="" este atributo mostrara la descripción de la imagen
Ejemplo :
<img class="jd-front__img__gallery"
loading="lazy"
src="img/tumblr/IMG_20191214_205726_tumblr.jpg"
data-url-img="img/IMG_20191214_205726.jpg"
data-title-img="Reno"
data-desc-img="Adorno Navideño"
alt=""
>