FF11+ IE8+ Chrome

Ken Burns Image Slideshow

Author: John Faithorn | Modified by Dynamic Drive

Description: Ken Burns is a type of panning and zooming effect commonly used in video production to bring still images to life. This image slideshow adds an awesome Ken Burns effect to each image during transition, with the ability to show a corresponding description. One of our clients wanted an hyperlinked image slideshow with a sleek Ken Burns effect. Instead of reinventing the wheel, we turned to this awesome open source script, and updated it with a few improvements:

  • Compatibility with jQuery 3.x

  • Ability to hyperlink the images within the slideshow

  • Slideshow more mobile friendly, expanding to 100% of document width in small screen devices

The script as mentioned applies a ken burns effect to each image. To make it more interesting, the pan direction is random each time, taking into account the native dimensions of the image. Specify the amount of zoom to occur each time. Two handy event handlers of the script lets you do more advanced things such as display a corresponding description for each slide beneath the slideshow. Cool!

Demo (certain slides are hyperlinked):


Directions

Simply add the below code inside the <HEAD> section of the page:

Select All

The above code references 2 external files plus 1 image. Download them below (right click, and select "Save As"):

Step 2: Then, insert the following sample HTML where you want the slideshow to appear:

Select All

And that's it. Read on to learn more about customizing the script.

Ken Burns Slideshow Documentation

 To create a Ken Burns Slideshow, call the following method after the document DOM has loaded:

$('#slideshowid').Kenburns(options)

Where "slideshowid" is the ID of an empty DIV on the page that will house the Ken Burns slideshow.

The following are the available options you can pass into the method to customize various aspects of it.

Available Options

options Description
images

Required

An array containing the full relative paths or absolute paths to the images you wish to show in the slideshow, such as:
images: [
	"bluewall.jpg",
	"cutebirds.jpg",
	"josie.jpg",
	"landscape.jpg",
	"table.jpg"
],
urls

Defaults to undefined

An array containing the URLs of each image in that order. Enter an empty string ("") to disable for a select image. Remove the urls[] option to disable URLs for all images.
urls: [
	"",
	"http://javascriptkit.com",
	"http://dynamicdrive.com",
	"",
	"http://cssdrive.com"
],
scale

Defaults to 1

A value between 0-1 that specifies the initial scale of each image before any zoom effect is applied. A value of 1 means no zoom will occur, as the initial image is already the size of the image after zooming. A value of 0.5 for example will see each image originally appear half the size of its original size, slowing zooming in until it is the original size.

Due to the way the Ken Burns effect works, when you chance the scale option, you should also adjust the slideshow wrapper size to ensure no parts of the images are clipped (if you care). The slideshow's dimensions is specified inside style.css, inside the very first selector:

#kenburns-slideshow {
	position: relative;
	width: 600px;
	height: 360px;
	border: 10px solid darkred;
	box-sizing: border-box;
	z-index: 1;
	overflow: hidden;
}

As the author notes, to work out the minimum slideshow wrapper size to use so each image is fully shown, use the following formula:

image width * scale
image height * scale
duration

Defaults to 400

The duration of each image being shown at resting state, in milliseconds.
fadeSpeed

Defaults to 500

The fade duration of each image, in milliseconds.
ease3d

Defaults to "cubic-bezier(.81, 0, .26, 1)"

Boolean variable that decides whether the slideshow should remember and recall the last viewed slide within a browser session when the page is reloaded.
onSlideComplete: function(){}

Defaults to empty function

Callback function that is called each time the slideshow finishes displaying a transition. Useful for displaying a custom description for each slide as the slideshow changes, for example.
onLoadingComplete: function(){}

Defaults to empty function

A callback function that is called once when the images have finished loading.
getSlideIndex() Public function that returns the index of the current slide being shown. Can be used inside the two event handlers above by calling this.getSlideIndex(). For example:
onSlideComplete: function(){
	$('#slide-title').html(titles[this.getSlideIndex()]);
},
Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post