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