Lightbox de imagen básica en JavaScript puro

Vista prévia

Descripción

Una biblioteca JavaScript muy pequeña para presentar sus imágenes en una ventana emergente de pantalla completa como un modal. Haga clic en cualquier lugar del área negra para cerrar la caja de luz.

Funcionamiento

Añada imágenes con subtítulos especificados utilizando Data-src Attribute a su página web.

<img class="thumb lightbox-photo" data-caption="First Photo Caption" src="1.jpg" />
<img class="thumb lightbox-photo" data-caption="Second Photo Caption" src="2.jpg" />

Los estilos CSS principales para el lightbox.

.lightbox-wrapper {

position: absolute;

height: 100%;

width: 100%;

z-index: 1004; /*This is appended before the actual lightbox is faded in so that elements with










high z-index values (e.g. navbar) don't cover lightbox during fadein*/
}

.lightbox-photo:hover { cursor: pointer; }

.expanded {

position: fixed;

height: 95%;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 1002;
}

Estilo de la superposición de fondo de pantalla completa.

.overlay {

position: fixed;

top: 0;

bottom: 0;

background-color: black;

height: 100%;

width: 100%;

opacity: 0.85;

z-index: 1001;
}

Estilo de la barra de título.

.caption {

position: fixed;

background: black;

color: white;

padding: 8px;

border-radius: 5px;

font-size: 14px;

bottom: 3%;

left: 50%;

transform: translateX(-50%);

z-index: 1003;
}

Incluya el archivo de JavaScript lightbox. js en la página web cuando sea necesario. Eso es todo.

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