jQuery Image Gallery Plugin With Flipping and Rotation Animations - heapshot
| File Size: | 913KB |
|---|---|
| Views Total: | 3634 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











