Navigation

1. Home: Setup photostack
2. Example 1: Without any options
3. Example 2: With easing
4. Example 3: Horizontal swapping
5. Example 4: Slideshow
6. Example 5: Cutting-edge shadows

Markup

<div id="photos">
  <img src="images/sa_m_1.jpg" alt="Streetart 1" width="500" height="333" />
  <img src="images/sa_m_2.jpg" alt="Streetart 2" width="500" height="332" />
  <img src="images/sa_m_3.jpg" alt="Streetart 3" width="500" height="332" />
  <img src="images/sa_m_4.jpg" alt="Streetart 4" width="500" height="375" />
  <img src="images/sa_m_5.jpg" alt="Streetart 5" width="500" height="375" />
</div>
<div id="controls">
  <a href="#previous" id="prev">« Previous</a> - <a href="#next" id="next">Next »</a>
</div>

Note: You need to set the width and height attribute of the images to prevent a bug in Chrome.

Code

$(document).ready(function() {
  $('#photos').photostack({
    speed : 600,
    easeIn : 'easeOutExpo',
    easeOut : 'easeInExpo'
  });
});

Result

photostack jQuery Plugin coded by Sebastian Senf - All example photos are under Creative Commons Attribution-Share Alike License - Found on Flickr (1, 2, 3, 4 and 5)