jQuery Image Gallery Plugin With Flipping and Rotation Animations - heapshot

File Size: 913KB
Views Total: 3576
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Image Gallery Plugin With Flipping and Rotation Animations - heapshot

heapshot is an awesome jQuery gallery plugin that displays a group of stacked images with flipping, easing and rotation animation effects.

Basic Usage:

1. Include jQuery library and other necessary javascript files on the page

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imagesloaded.min.js" type="text/javascript"></script>
<script src="jQueryRotate.min.js" type="text/javascript"></script>
<script src="jquery.heapshot.js" type="text/javascript"></script>

2. Include jQuery heapshot CSS to style your gallery

<link rel="stylesheet" href="css/heapshot.css">

3. Markup Html Structure

<ul class="heapshot">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
</ul>

4. Call the plugin with options

jQuery(document).ready(function($) {
    $('.heapshot').heapshot({
        'indexStart'        : 100, // The z-index css property which is applied to the images, the count start from this option
        'rotation'          : 80, // The angle applied during easing
        'easing'            : function(x, t, b, c, d){return c*t/d + b;}, // An equation to calculate the easing
        'overflowparents'   : true, // Set all the parents overflow to visible if set to true
        'autostart'         : true, // Start automatically the flipping if set to true
        'animationdelay'    : 1500 // The time between flipping animations
    });
});

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