Scattered Polaroid Gallery In Pure JavaScript And CSS3

Category: Gallery , Javascript | August 6, 2016
Views Total:3,711 views
Official Page:Go to website
Last Update:August 6, 2016


Scattered Polaroid Gallery In Pure JavaScript And CSS3


A simple JavaScrpt and CSS/CSS3 based Polaroid Gallery that automatically moves the selected photo into the middle of the screen while shuffling the others. Also provides a navigation which allows you to navigate between photos with next / prev buttons.

How to use it:

Include the Polaroid Gallery’s JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="css/polaroid-gallery.css">
<script src="js/polaroid-gallery.js"></script>

Create a placeholder element for the Polaroid gallery.

<div id="gallery" class="fullscreen">

Create a navigation for the Polaroid gallery.

<div id="nav" class="navbar">
  <button id="preview">&lt; Previous</button>
  <button id="next">Next &gt;</button>

Add the photos you want to present in the /data/data.json.

  "name": "1.jpg",
  "caption": "Caption 1"
  "name": "2.jpg",
  "caption": "Caption 2"
  "name": "3.jpg",
  "caption": "Caption 3"

Initialize the Polaroid Gallery and we’re done.

new polaroidGallery();


You Might Be Interested In:

Leave a Reply