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 |
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.