Polaroidify

About

Polaroidify is a jQuery plugin which rotates through divs just like if they were a stack of polaroids.

Demos

Since a picture, or in this case an animation says more than a thousand words, here are some demos including the parameters used.

Demo 1

Bild 1

Bild 2

Bild 3

<script>
  $('#fotostack-demo-1').polaroidify({
    'deg': -30,
    'degOffset': 15,
    'direction': 'right',
    'slide': 200,
    'trans': 1000,
    'wait': 1000
  });
</script>

Demo 2

Bild 1

Bild 2

Bild 3

<script>
  $('#fotostack-demo-2').polaroidify({
    'deg': -45,
    'degOffset': 45,
    'direction': 'left',
    'slide': 200,
    'trans': 100,
    'transOffset': 1500,
    'waitOffset': 1500,
    'wait': 0
  });
</script>

How to use

Just include the plugin in the header of the page you want to use it on:

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

On the bottom of the page define which elements are to polaroidified and which parameters are to be used:

<script>
  $('#polaroid-stack').polaroidify();
</script>

The selection may be a single item by id or a class with multiple items - if you want to use the same parameters on multiple stacks on a single page.

HTML Structure

You can use any kind of parent-child structure:

<parent>
  <child 1 />
  <child 2 />
  <child 3 />

  <child n />
</parent>

For divs it would look like this:

<div>
  <div>Pic 1</div>
  <div>Pic 2</div>
  <div>Pic 3</div>
</div>

But it is also possible to use lists:

<ul>
  <li>Pic 1</li>
  <li>Pic 2</li>
  <li>Pic 3</li>
</ul>

Parameters

The plugin is highly customizable, here is a parameter overview, what they do and their default values:

Parameter	Function	Values	Default
deg	The stacks base rotation in degrees.	-360..360	0
degOffset	Random offset for a single pic in degrees. Gets added to the base rotation.	-360..360	10
wait	Wait time in ms before the next rotation.	0..	5000
waitOffset	Random wait offset in ms. Is added to wait	0..	0
trans	The time in ms how long a transition takes in one direction.	0..	1500
transOffset	Random transition time offset. Is added to transOffset.	0..	0
slide	How far from the stack the pictures get slided in px.	0..	500
direction	The direction in which the pictures should slide.	right, left, up, down, left up, left down, right up, right down	right

Parameters which you will most likely change are deg for the base rotation, slide for the amount of pixels to slide and direction of course for the direction you want to slide. Feel free to play with the other parameters in order to give your animation a special touch.

Browser Compatibility

Browser	Version	Tested
Chrome	>= 4.0	Yes
Firefox	>= 3.5	Yes
Opera	>= 10.5	Yes
Safari	>= 3.1	Yes
IE	>= 9.0	Yes
iOS Safari	>= 3.2	No
Android Browser	>= 2.1	Yes
Opera Mobile	>= 11	No
Chrome for Android	>= 18	No
Firefox for Android	>= 14	No

If you have tested it with a Browser I could not have tested with, please tell me.

Download

You can clone the gitHub repo:

git clone https://github.com/stylesuxx/polaroidify.git

or grab a package:

Support / Bugs / Features

If you have found any Bugs, need general support or think that a feature is missing, feel free to submit to the Issue tracker.
In case you want to contact me personally drop me a line at: chris[-at-]1337[-dot-]af

Author

Polaroidify was built by Chris Landa for Crevo and was initially used for the Modul Universität's FaceBook page.