Looking for a Ken Burns slideshow

[jscheuer1]

as I can see too your website works fine "for real". What do you think, to send your question to Aeron Glemann, aeron.glemann at gmail.com, who elaborated this extension. Maybe there is a Windows 7 "intolerance" and the program would have to be adjusted.

After doing a search I see Glemann's "Ken Burns" work (at least some of it) is for MooTools and uses otherwise 'normal' javascript and HTML as filtered via the MooTools library. What I did is jQuery based and involves the use of the canvas tag. Vic's script is all javascript and HTML.

I couldn't easily find a live demo of Glemann's work though, are you saying it doesn't work on Win 7? Is there a live demo you're aware of?

[jscheuer1]

I know this is an old thread, but I've been playing around with this again recently and am almost there. In jQuery (and in general) it's actually much simpler than we all thought, or at least than I thought. Instead of mutiple pans and zooms occurring at once, it's just a "setup", which prepares the image for the particular effect by changing its size (width and height - proportionally) and moving to a position (absolute, left and/or top, bottom right) within the frame (parent div, position relative, overflow hidden). The effect itself is then a single pan (animated position change(s) with or without a concurrent change in size (width and height again). All of which can be expressed rather simply in jQuery (this was the starting point):

// jQuery Ken Burns Effect Script (c)2013 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use

(function($){
	burns = [
		{//0
			setup: {width: '136%', height: 'auto', position: 'absolute', top: 0, left: 0},
			ani: {width: '100%'}
		},
		{//1
			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-36%', left: 0},
			ani: {width: '100%', top: 0}
		},
		{//2
			setup: {width: '136%', height: 'auto', position: 'absolute', top: 0, left: '-36%'},
			ani: {width: '100%', left: 0}
		},
		{//3
			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-36%', left: '-15%'},
			ani: {width: '100%', top: 0, left: 0}
		},
		{//4
			setup: {width: '100%', height: '100%', position: 'absolute', top: 0, left: 0},
			ani: {width: '136%', height: '136%', top: '-15%'}
		},
		{//5
			setup: {width: '115%', height: '115%', position: 'absolute', bottom: 0, left: '-15%'},
			ani: {width: '136%', height: '136%', bottom: '-15%', left: 0}
		},
		{//6
			setup: {width: '136%', height: 'auto', position: 'absolute', top: '-15%', left: 0},
			ani: {left: '-36%'}
		}
	];
	$.fn.kenburns = function(burn, duration){
		this.css(burns[burn].setup).animate(burns[burn].ani, {queue: false, easing: 'linear', duration: duration});
	};
})(jQuery);

Some of the "burns" are pretty similar, as I was fine tuning with some of them, others can be added. I worked this out for use with The Ultimate Fade-in Slideshow, and it's pretty close to what the WOW slider does, with much less code and no canvas tag. Things aren't perfected yet (they almost never are with me - but I see some things this still really needs), but here's a demo:

http://home.comcast.net/~jscheuer1/s...de/kburns1.htm

One thing though, even in the WOW slider version, there are some slight distortions of the image as it's panning/zooming. This can be particularly seen with fine lines. The images used in the WOW demo I linked to earlier in this thread don't have very many of those though, so it's hardly noticeable. You can see it around the doorways on the airplanes though, as those are fine lines. This might be browser and/or monitor dependent.