Polaroid gallery - Script Tutorials

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.

Contents

HTML
JS
CSS

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="<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:

<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