Skip to content

A Ken Burns Effect style slideshow plugin for jQuery. Fills the browser with (cropped and panned) images given a selector.

Notifications You must be signed in to change notification settings

subchild/jquery.slideshowify.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 

Repository files navigation

Slideshowify

jQuery.slideshowify.js is a jQuery plugin for generating a slideshow with a Ken Burns Effect from images that match a selector. Images that don't fit the window proportions exactly (generally the case) are cropped and panned across the screen. This also resembles that Mac screensaver.

As of version 0.9, jQuery.slideshowify supports hardware-accelerated CSS3 transforms, which include panning in all directions as well as zooming in and out (when the image aspect ratio matches that of the window). CSS3 support is provided by the excellent jQuery.transit plugin from Rico Sta. Cruz.

@TODO fix the resizing business (force full screen and prevent resizing || add resize handler to adjust numbers)

To use, do something like this:

$("img").slideshowify();

or:

$.slideshowify({
	dataUrl     : "http://www.gallerama.com/services/gallery/get.php?gid=2107&versions[]=9",
	dataType    : "jsonp",
	randomize   : true,
	aniSpeedMin : 6000,
	aniSpeedMax : 10000,
	filterFn    : function(imgs){ // filter data
		var fixedImgs = [];
		$.each(imgs, function(i, img){
			fixedImgs.push($.extend(img.versions["9"], {id:img.id}));
		});
		return fixedImgs;
	},
	afterFadeIn : function(curImage){
		// do something
	},
	beforeFadeOut : function(curImage){
		// do something else
	}
});

About

A Ken Burns Effect style slideshow plugin for jQuery. Fills the browser with (cropped and panned) images given a selector.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published