Stacked & Scattered Photo Gallery Plugin For jQuery - wdImageStax

wdImageStax is a jQuery & jQuery UI based Polaroid style photo gallery that the images are scattered and stacked randomly in a container and will shuffle the gallery when clicked.

How to use it:

1. Make sure you have jQuery library and jQuery UI installed properly in your document.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Include the jQuery wdImageStax plugin's file in the document. Note that the jquery.wdImageStax.min.js needs to be loaded after jQuery library.

<link href="css/wdImageStax.css" rel="stylesheet">
<script src="js/jquery.wdImageStax.min.js"></script>

3. Add a list of images to the gallery.

<div id="gallery-wrapper">
  <ul class="image-list">
      <li>
          <img src="1.jpg">
      </li>
      <li>
          <img src="2.jpg">
      </li>
      <li>
          <img src="3.jpg">
      </li>
      <li>
          <img src="4.jpg">
      </li>
      <li>
          <img src="5.jpg">
      </li>
  </ul>
</div>

4. Call the function on the gallery wrapper and done.

$('#gallery-wrapper').wdImageStax(/*OPTIONS*/);

5. Full plugin options to customize the photo gallery.

// the height / width of the photo gallery
height: false,
width: false,

// false = use the child ul it finds
list: false,

// centre the images
centreImages: false,

// z-index value
index: 1200,

// maximum degree your image stack will be rotated/scattered
degree: 20,

// the pattern it should rotate/scatter the image. 
// The choices are "default" or "random", with former will rotate by same degree value increment;
degreePattern: "default",

// animation speed in ms
animateSpeed: 500,

// the height of the swing, in relation to the size of the image.
swingTop: 0.4,

// the length of the swing to the left, in relation to the size of the image.
swingLeft: 0.6,

// adjust the animation area if the window is resized
evaluateOnWindowResize: true,

// styles for the gallery selector/element
wrapperStyles: {},

// styles for each of the images
imageStyles: {}

---

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