Galería Polaroid responsive con lightbox Integration-Vintalight. js

Vista prévia

Descripción

La biblioteca Vintalight. js le permite crear una galería de fotos de estilo Polaroid con la integración de lightbox de imagen. Construido con Pug, SASS y vainilla JS (Babel).

Funcionamiento

Inserte la versión compilada del Vintalight. js en el documento.

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Añadir imágenes a la galería.

<section class="vintalight" id="vintalight">

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/69969/pexels-photo-69969.jpeg?w=1260&amp;h=750&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/247929/pexels-photo-247929.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/92866/pexels-photo-92866.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/331986/pexels-photo-331986.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/296649/pexels-photo-296649.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>

<figure class="vintalight__container">



<div class="vintalight__container__photo">





<img class="vintalight__container__photo__img" src="https://images.pexels.com/photos/219776/pexels-photo-219776.jpeg?h=350&amp;auto=compress&amp;cs=tinysrgb"







alt="Happy Moment">



</div>



<figcaption class="vintalight__container__caption">





<h3 class="vintalight__container__caption__text">Happy Moment</h3>



</figcaption>

</figure>
</section>

Personalice la Galería reemplazando las variables SASS predeterminadas como se muestra a continuación:

$size: 30px;
 $resize: 0.7;
 $fig-width: 10.5em;
$fig-height: 12.25em;
 $photo-size: 9.25em;
 $font-size: 1em;
 $font-view: "Roboto", sans-serif;
 $font-description: 'Nanum Pen Script', cursive;