Polaroid

jQuery plugin to create some old school polaroid images. Demo

Proudly supported by apps developers

Installation

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

Usage of this plugin is very easy, I promise.

Step 1

Include it in your page

<script type="text/javascript" src="path/to/polaroid.js">

Step 2

Create easy markup

<div class="my-awesome-images">     <img src="path/to/image.jpg" alt="My awesome image #1" />     ... </div>

Step 3

Time to rock

$('.my-awesome-images').polaroid();

Step 4

Enjoy

Captions

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

Config reference

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 });

Advanced usage

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) {        ... }