Script Tutorials

Polaroid gallery

—

by

admin
in

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:

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

01 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
02 <script type="text/javascript" src="js/polaroid.min.js"></script>
03 <script type="text/javascript">
04   $(document).ready(function(){
05     $('.polaroid').polaroid({
06       autoPlay: true,
07       duration: 2000,
08       // slideBackground: "base64 encoded background or url to background",
09       rotationRange: {
10         min: -7,
11         max: 7
12       },
13       shadow: '5px 5px 3px rgba(0,0,0,0.15)',
14       borderRadius: '2px'
15     });
16   });
17 </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:

1 .polaroid {
2   margin: 50px auto;
3   width: 550px;
4 }
5 .polaroid-caption {
6   text-align:center;
7 }

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