CSS sólo minimalista Galería de imágenes responsive lightbox-CSSBox

Vista prévia

Descripción

Un lightbox de galería de imágenes minimalista y adaptable en el que el usuario puede navegar entre las fotos de tamaño completo en una ventana emergente de lightbox de pantalla completa. Construido usando CSS/CSS3 y marcado HTML llano.

Funcionamiento

Para empezar, sólo tiene que incluir el CSSBox. CSS en su página HTML.

<link href="cssbox.css" rel="stylesheet">

Y luego inserte la miniatura y las imágenes completas en la Página Web de la siguiente manera. Eso es todo.

<div class="cssbox">

<a id="image1" href="#image1">


<img class="cssbox_thumb" src="thumbn-1.jpg">


<span class="cssbox_full">



<img src="full-1.jpg">


</span>

</a>

<a class="cssbox_close" href="#void"></a>

<a class="cssbox_next" href="#image2">&gt;</a>
</div>

<div class="cssbox">

<a id="image1" href="#image2">


<img class="cssbox_thumb" src="thumbn-2.jpg">


<span class="cssbox_full">



<img src="full-2.jpg">


</span>

</a>

<a class="cssbox_close" href="#void"></a>

<a class="cssbox_prev" href="#image1">&lt;</a>

<a class="cssbox_next" href="#image3">&gt;</a>
</div>

<div class="cssbox">

<a id="image1" href="#image3">


<img class="cssbox_thumb" src="thumbn-3.jpg">


<span class="cssbox_full">



<img src="full-3.jpg">


</span>

</a>

<a class="cssbox_close" href="#void"></a>

<a class="cssbox_prev" href="#image2">&lt;</a>
</div>

Registro de cambios

12/18/2018

• Corregido CSS

08/14/2018

• Se corrigió la compatibilidad de bootstrap