Simple jQuery Image Slideshow with Ken Burns Effect

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.