Polaroid gallery

Polaroid – we did not talk about photo galleries for a while, however enough time has already passed and here could be new galleries. Not so long ago, I stumbled on a new jquery plugin gallery, which builds the photos in a stack of Polaroid pictures. It seemed to me it was fun and can please you, because gallery has a very user-friendly and intuitive interface. Implementing it for a ‘stack’ of your photos is not difficult. Today we look at the whole process.

Live Demo


First of all, we need to prepare the HTML markup. Structure is simple:

div class="polaroid"
  img src="images/1.jpg" data-caption="h3Volcanic lightning 1/h3" /
  img src="images/2.jpg" data-caption="h3Volcanic lightning 2/h3" /
  img src="images/3.jpg" data-caption="h3Abraham Lake/h3" /
  img src="images/4.jpg" data-caption="h3Underground natural springs/h3" /
  img src="images/5.jpg" data-caption="h3Giant crystal cave in Nacia/h3" /
  img src="images/6.jpg" data-caption="h3Shimmering shores of Vaadhoo/h3" /
  img src="images/7.jpg" data-caption="h3Reflective salt flats in Bolivia/h3" /
  img src="images/8.jpg" data-caption="h3Light pillars over Moscow/h3" /
  img src="images/9.jpg" data-caption="h3Natural salt water fountain/h3" /
  img src="images/10.jpg" data-caption="h3Beautiful sandstone formations in Arizona/h3" /

Note, that you can put your custom captions (even including external links) for images in the ‘data-caption’ attribute.


After we defined the html, we can attach the gallery plugin script and initialize it:

script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"/script
script type="text/javascript" src="js/polaroid.min.js"/script
script type="text/javascript"
      autoPlay: true,
      duration: 2000,
      // slideBackground: "base64 encoded background or url to background",
      rotationRange: {
        min: -7,
        max: 7
      shadow: '5px 5px 3px rgba(0,0,0,0.15)',
      borderRadius: '2px'

But keep in mind, that if the jQuery (jquery-latest.min.js) was already connected in your page, you don’t need to connect it in the second time. The plugin has the following properties:

  • autoPlay – Auto Play (true / false)
  • duration – Display duration of photos (ms)
  • slideBackground – Background of photos (base64 encoded background or url to background)
  • rotationRange – Rotation range of photos (degree)
  • shadow – Shadow
  • borderRadius – Border radius of photos


In fact, you may not need any additional styles. However I added the following adjustments:

.polaroid {
  margin: 50px auto;
  width: 550px;
.polaroid-caption {

The styles aligns the polaroid object (gallery) to the screen center and also aligns text of captions to center.

Live Demo


download in package


That’s all for today, our polaroid photo gallery is ready. Have a nice day!

Original library is taken from Github