Galería de lightbox minimalista en JavaScript puro

Vista prévia

Descripción

Una galería de lightbox de JavaScript nativa y minimalista para muestra todas tus imágenes en una ventana emergente de lightbox donde los usuarios pueden navegar a través de imágenes con flechas.

Keyboard interactions:

• left : volver a la imagen anterior.
• right : Goto la siguiente imagen.
• ESC : cierre el lightbox.

Funcionamiento

Agregue miniaturas al contenedor de la galería.

<div class="gallery-container" id="gallery-container">

<div class="gallery-item">


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

</div>

<div class="gallery-item">


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

</div>

<div class="gallery-item">


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

</div>

...
</div>

Cargue el archivo principal de JavaScript ' lightbox. js ' al final del documento.

<script src="js/lightbox.js"></script>

Los estilos CSS principales para la galería & ventana emergente lightbox.

.gallery-container {

width: 900px;

margin-left: auto;

margin-right: auto;

display: -ms-grid;

display: grid;

-ms-grid-columns:(1fr)[4];

grid-template-columns: repeat(4, 1fr);

grid-gap: .5em
}

.gallery-img {

display: block;

max-width: 100%;

cursor: pointer
}

.lightbox-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,.8);

display: -ms-flexbox;

display: flex;

z-index: 1
}

.lightbox-container {

position: relative;

margin: auto;

background: #fff;

padding: 1em;

border-radius: .2em
}

.close-modal {

background: tomato;

color: #fff;

position: absolute;

width: 1.8em;

height: 1.8em;

text-align: center;

line-height: 1.8em;

top: -.9em;

right: -.9em;

border-radius: 50%;

cursor: pointer
}

.lightbox-description {

text-align: center;

font-size: 1.1em
}

.lightbox-navigation {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: justify;

justify-content: space-between;

font-size: .9em;

opacity: .8
}

.lightbox-navigation__button {

text-decoration: none;

color: tomato
}