Simple Photo Stack Rotator Plugin with jQuery - Photostack.js

Photostack.js is an ultra-light jQuery plugin to create Polaroid gallery-style photo stack effect using CSS3 transform:rotate that allows the users to switch between photos by clicking on the top one.

How to use it:

1. Load the jQuery photostack.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.Photostack.js"></script>

2. Create a list of images for the stacked photo gallery.

<ul class="photostack">
  <li><img src="1.jpg"></li>
  <li><img src="2.jpg"></li>
  <li><img src="3.jpg"></li>
</ul>

3. The required CSS styles.

.js-photostack { position: relative; }

.js-photostack > * {
  position: absolute;
  top: 0;
  left: 0;
  list-style-type: none;
}

4. Call the function on the html list to initialize the plugin.

$(".photostack").Photostack();

5. Possible config options.

// top position
top:40,

// left position
left:500,

// custom rotation angles
degFrom:-20,
degTo:20,

animation:"move",
animationSpeed:500,
timespan:0,
auto:false,
preventClick:false

Change log:

2015-08-04

• Update jquery.Photostack.js
• Added more options.

2015-07-24

• added config options.

---

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