Slideshowify: Ken Burns Slideshow Effect as a jQuery Plugin

Slideshowify is a jQuery plugin for creating a slideshow of images that will fill the screen with a (cropped) image, then pan across to reveal the rest of it. This is commonly referred to as the Ken Burns Effect and is often seen in documentaries. A nice version is of it can be seen in that Mac screensaver.

Anyhow, here’s a stab at such a thing. Some future enhancements are obvious (pan direction, zooming, transition options, etc.) and anticipate finding the time to add that stuff shortly.

For now, check out the code on and see a demo at

To use it, include jQuery, jquery.slideshowify.js, then feed slideshowify a selector that matches some images. For example:


Alternatively, you could load data from an external feed and call $.slideshowify() with configuration options:

 	dataUrl   : "[]=9",
	dataType  : "jsonp",
	randomize : true,
 	filterFn  : function(imgs){
 		var fixedImgs = [];
 		$.each(imgs, function(i, img){
 		return fixedImgs;
	afterFadeIn : function(imgData){},
	beforeFadeOut : function(imgData){}

Most of the params here are passed directly to jQuery’s $.ajax() method. Some are used to reformat the data (slideshowify() expects an array of objects of this format: {src:””, w:”600″, h:”400″}), others are hooks or speed (fade, delay) options.

Proper documentation will be provided. Most likely.