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.

 

HTML

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

HTML
<div class="polaroid">
  <img src="images/1.jpg" data-caption="<h3>Volcanic lightning 1</h3>" />
  <img src="images/2.jpg" data-caption="<h3>Volcanic lightning 2</h3>" />
  <img src="images/3.jpg" data-caption="<h3>Abraham Lake</h3>" />
  <img src="images/4.jpg" data-caption="<h3>Underground natural springs</h3>" />
  <img src="images/5.jpg" data-caption="<h3>Giant crystal cave in Nacia</h3>" />
  <img src="images/6.jpg" data-caption="<h3>Shimmering shores of Vaadhoo</h3>" />
  <img src="images/7.jpg" data-caption="<h3>Reflective salt flats in Bolivia</h3>" />
  <img src="images/8.jpg" data-caption="<h3>Light pillars over Moscow</h3>" />
  <img src="images/9.jpg" data-caption="<h3>Natural salt water fountain</h3>" />
  <img src="images/10.jpg" data-caption="<h3>Beautiful 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:

HTML
<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:

CSS
.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.

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