jQuery plugin to create some old school polaroid images. Demo
Proudly supported by apps developers
Download the plugin zipball or you can install it using bower
$ bower install Polaroid
I suggest using velocity instead of standard jQuery.animate()
All you have to do is include velocity.js
somewhere in your page.
Usage of this plugin is very easy, I promise.
Include it in your page
<script type="text/javascript" src="path/to/polaroid.js">
Create easy markup
<div class="my-awesome-images">
<img src="path/to/image.jpg" alt="My awesome image #1" />
...
</div>
Time to rock
$('.my-awesome-images').polaroid();
Enjoy
Captions can be set by using data-caption
attribute for example:
<img src="path/to/image.jpg" alt="My awesome image #1" data-caption="<h3>Me and Mary on vacation</h3>" />
Below there is default configuration of Polaroid feel free to override
{
autoPlay: false,
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'
}
$('.my-awesome-images').polaroid({
autoPlay:true,
duration:5000
});
If you want to use Polaroid with require js modify file as following
define(['vendor/velocity/jquery.velocity', 'jquery'], function() {
"use strict";
$.fn.polaroid = function(config) {
...
}