Simple jQuery Image Slideshow with Ken Burns Effect
File Size: | 579 KB |
---|---|
Views Total: | 13934 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Kenburnsy is a simple lightweight jQuery plugin for creating a responsive slideshow with image zooming & panning effects typically called 'Ken Burns Effect'.
How to use it:
1. Load the necessary jQuery library and jQuery Velocity.js in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="src/jquery.velocity.js"></script>
2. Load the jQuery Kenburnsy plugin's JS and CSS files after jQuery library.
<link rel="stylesheet" href="src/jquery.kenburnsy.css"> <script src="src/jquery.kenburnsy.js"></script>
3. Insert a group of images into a container element.
<div id="wrapper"> <img src="img1.jpg" alt=""> <img src="img2.jpg" alt=""> <img src="img3.jpg" alt=""> ... </div>
4. Call the plugin on the container element and we're done.
$(function() { $("#wrapper").kenburnsy(); });
5. Default settings.
$(function() { $("#wrapper").kenburnsy({ fullscreen: false, // fullscreen mode duration: 9000, fadeInDuration: 1500 }); });
Change log:
2014-08-12
- Get rid of exceptions in IE8
2014-07-28
- Resolve codeclimate warnings; Fix typos
2014-07-27
- Huge refactoring
2014-07-25
- Tiny improvements
This awesome jQuery plugin is developed by ZeroOneStudio. For more Advanced Usages, please check the demo page or visit the official website.