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

HTML

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

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

JS

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"
  $(document).ready(function(){
    $('.polaroid').polaroid({
      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'
    });
  });
/script

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

CSS

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

.polaroid {
  margin: 50px auto;
  width: 550px;
}
.polaroid-caption {
  text-align:center;
}

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

Live Demo

[sociallocker]

download in package

[/sociallocker]

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

Original library is taken from Github