Responsive Polaroid Gallery With Lightbox Integration – Vintalight.js

The Vintalight.js library lets you create a responsive Polaroid-style photo gallery with image lightbox integration. Built with Pug, SASS and vanilla JS (Babel).

How to use it:

Insert the compiled version of the Vintalight.js into the document.

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

Add images to the gallery.

<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>

Customize the gallery by overriding the default SASS variables as displayed below:

$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;