CSSHTMLjquery & Javascrip

Simple Animated Responsive Polaroid Image gallery Plugin with Lightbox

574

Forget about simple photo gallery plugin Here I’ll show you how to create simple animated responsive polaroid image gallery using Javascript and CSS for your website to showcase your life movement or your photography showcase. Vintalight plugin is simple lightweight code written in javascrpt and CSS3 which will not effect your website page load speed. and help you to create an awesome new style portfolio gallery for your images. The plugin also support lightbox popup when ever user click on any image a simple lightbox will open with focused image.

Creating Responsive Polaroid Image Gallery with Lightbox

Libraries

Include required plugins libraries on page.

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

 

HTML

Insert your images in below code to display Polaroid Gallery for your images.

    <section class="vintalight" id="vintalight">
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
          <figure class="vintalight__container">
            <div class="vintalight__photo"><img class="vintalight__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__caption">
              <h3 class="vintalight__text">Happy Moment</h3>
            </figcaption>
          </figure>
    </section>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

You might also like More from author