jQuery Draggable and Rotatable Photo Viewer - Polaroid

Polaroid is an amazing jQuery plugin for placing a lot of photos on the web page that you can drag them around and rotate them. When dragging a photo around, you'll see the shadow. When it's placed down, it's rotated to the left or the right (random).

How to use it:

1. Include necessary javascript files on your web page

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>

2. Markup html structure

<div class="polaroid">
<img src="1.png" alt="" />
<p>Description</p>
</div>

<div class="polaroid">
<img src="2.png" alt="" />
<p>Description</p>
</div>

<div class="polaroid">
<img src="3.png" alt="" />
<p>Description</p>
</div>

<div class="polaroid">
<img src="4.png" alt="" />
<p>Description</p>
</div>

<div class="polaroid">
<img src="5.png" alt="" />
<p>Description</p>
</div>

...

3. The CSS

.polaroid {
width: 368px;
height: 376px;
background-image: url(../images/polaroid-bg.png);
position: absolute;
}
.polaroid img {
width: 335px;
height: 275px;
margin: 25px 0 0 15px;
}
.polaroid p {
text-align: center;
font-family: Georgia, serif;
font-size: 20px;
color: #2E2E2E;
margin-top: 15px;
}

Change log:

2014-04-05

• update.

---

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