Skip to content

ama3ing/Polaroid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

jQuery plugin to create some old school polaroid images

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published