Create Retro Style Images Using Polaroid.js

File Size: 132 KB
Views Total: 254
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Retro Style Images Using Polaroid.js

Polaroid.js is a jQuery plugin that utilizes HTML5 canvas API to create retro polaroid style photos with configurable tapes, shadows, and background colors on the web page.

How to use it:

1. Insert the minified version of the Polaroid.js plugin after jQuery JavaScript library.

<script src="" 
<script src="js/polaroid.min.js"></script>

2. Add the data-polaroid attribute to the image and done.

<img src="1.jpg" data-polaroid />
<img src="2.jpg" data-polaroid />
<img src="3.jpg" data-polaroid />
<img src="4.jpg" data-polaroid />
<img src="5.jpg" data-polaroid />

3. Customize the background color of the polaroid photo. Default: '#fff'.

<img src="1.jpg" data-polaroid data-polaroidcolor="#ff0000" />
<img src="2.jpg" data-polaroid data-polaroidcolor="#000000" />
<img src="3.jpg" data-polaroid data-polaroidcolor="#220000" />
<img src="4.jpg" data-polaroid data-polaroidcolor="#330000" />
<img src="5.jpg" data-polaroid data-polaroidcolor="#440000" />

4. Customize the shadow dimension of the polaroid photo. Default: 15.

<img src="1.jpg" data-polaroid data-polaroidshadow="5" />
<img src="2.jpg" data-polaroid data-polaroidshadow="4" />
<img src="3.jpg" data-polaroid data-polaroidshadow="3" />
<img src="4.jpg" data-polaroid data-polaroidshadow="2" />
<img src="5.jpg" data-polaroid data-polaroidshadow="1" />

5. Determine whether to show the tape. Default: true.

<img src="1.jpg" data-polaroid data-polaroidtape="false" />
<img src="2.jpg" data-polaroid data-polaroidtape="true" />
<img src="3.jpg" data-polaroid data-polaroidtape="false" />
<img src="4.jpg" data-polaroid data-polaroidtape="true" />
<img src="5.jpg" data-polaroid data-polaroidtape="false" />

This awesome jQuery plugin is developed by tinoni. For more Advanced Usages, please check the demo page or visit the official website.