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">
</div>

Create a navigation for the Polaroid gallery.

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

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();