Ken Burns Image Slideshow
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:
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:
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 #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()]); }, |