Slideshowify is a super easy-to-use jQuery plugin for generating image slideshows with a Ken Burns Effect, where images which don't fit the screen exactly (generally the case) are cropped and either panned across the screen or zoomed in a randomly determined direction.

Fullscreen* Demo

* Fullscreen refers to the entire browser window. If user's platform supports true fullscreen mode for web browsing, they can manually activate it and enjoy the slideshow without the browser chrome.

Basic Use

It really can't be any simpler. Once you include the necessary scripts, this works:

$('img').slideshowify(); // Slideshowify all images on page. You may not want this.

Cake, right?

A Note Regarding Image (pre) Loading

While the plugin is smart enough to preload the following image (which likely hopefully takes less time than the current animation) and knows to stop pre-loading once all images have been loaded, you may want to ensure that the browser itself doesn't start loading all of the images on page load by keeping them out of the source.

Customization

Slideshowify is configurable. Without any parameters, the plugin with apply the effect to the entire browser window with default animation settings. To restrict the slideshow to a specific element, do something like this:

$('#someDiv img').slideshowify({ parentEl:'#targetDiv' }); // parentEl will be injected with each image to animate

Slideshowify also extends jQuery with a method which allows it to be used without a selector. The example below shows this, along with other supported parameters.

$.slideshowify({ dataUrl : "http://gallerama.com/services/gallery/get.php?gid=2107&versions[]=9", dataType : "jsonp", parentEl : "#target", randomize : true, // default is false aniSpeedMin : 8000, // shortest animation will be 8 seconds aniSpeedMax : 10000, // longest animation will be 10 seconds filterFn : function(imgs){ // sanitize or filter data var fixedImgs = []; $.each(imgs, function(i, img){ fixedImgs.push($.extend(img.versions["9"], {id:img.id})); }); return fixedImgs; } });

It should be pointed out that Slideshowify can be instantiated multiple times on a single page. I imagine this could produce effects which range from pleasantly subtle to cataclysmic.

A Plugin Without Hooks is Simply...well, Hookless

Slideshowify fires a number of events which can be hooked up for additional customizations.

beforeFadeOut afterFadeOut afterFadeIn beforeFadeIn

To use these, simply bind your custom functions to the target element:

$('#target1').bind('beforeFadeOut', function(e, img){}); // function will receive event object and current image

If you are using the plugin in fullscreen mode, the target is document:

$(document).bind('afterFadeIn'), function(e, img){});

Dependencies

In addition to jQuery (tested with versions 1.4+), Slideshowify requires the fantastic jQuery Transit plugin for CSS transformation and transition support. Kudos to @rstacruz for creating and distributing it.

Browser support

Slideshowify works on every single browser I tested it on! That's right - only those. But don't worry, that includes all browsers released in recent years, even IE6; perhaps even IE7. It also works and looks great on tablets and other mobile devices.

Obviously, browsers which support CSS3 transitions will produce better results. The plugin falls back to plain old frame animation for others, and zoom transitions aren't supported in this case.

Download

The latest stable version of the code can always be found on Github.

jquery.slideshowify.js Development (8kb, uncompressed and commented code)
jquery.slideshowify.min.js Production (4kb, conservatively minified)

For completeness, here's a link to the tested version of Rico's jQuery Transit:

jquery.transit.min.js

Usage

If you're reading this that means that the sections above were not entirely clear. Sorry about that. To use this thing, make sure your page includes the following scripts, then initialize as instructed previously:

<script src="jquery.js"></script> <script src="jquery.transit.min.js"></script> <script src="jquery.slideshowify.js"></script>

Obviously, the paths to these files should be adjusted accordingly. Oh, and you really shouldn't include these files separately but instead bundle them (along with other scripts, if any). I made a thing that does that back in 2008. Its called FileBundler and should still work. It even supports CSS files as well.

Meet the Maker

Slideshowify was created by Alex Kolundzija (@subchild) a web developer who has spent the last decade++ working on cool products at companies including Google, Meebo, MLB.com, TabletHotels and Razorfish.

Like most humans, he owns a digital camera and often uses it. At some point, love of photography combined with a deep interest in web development led him to create a photo hosting and management web service Gallerama, which has been around for a few years and which you should consider using. Not surprisingly, Slideshowify-powered slideshows are avaialble for all galleries hosted on Gallerama.

He rarely (but not never) writes on his blog, and is generally quick to respond to emails sent to a[at]ak.rs, an address he is very proud of.

Fork me on GitHub