ImageFlow - something like CoverFlow in Javascript


  ## Javascript [javascript]

/* Set some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";

/* Get width of the images div container in px */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	if (target < current-1 || target > current+1)
	{
		moveTo(current + (target-current)/3);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function moveTo(x)
{
	current = x;

	/* do stuff with the images div */
	var padding_left = document.getElementById("imageflow").offsetLeft;
	var div = document.getElementById("images");
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var biggest = width * 0.5;

	/* zIndex is the z-index in css = order of the layers (here images) */
	var zIndex = div.childNodes.length;

	for (index = 0; index < div.childNodes.length; index++)
	{
		var image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			var z = Math.sqrt(10000 + x * x)+100;
			var xs = x / z * size + size;

			var gna = 100 / z * biggest;

			if((image.width) > (image.height))
			{
				image.style.left = xs - 67 / z * biggest + padding_left +"px";
				image.style.height = gna + "px";
				image.style.width = "";
			}
			else
			{
				image.style.left = xs - 50 / z * biggest + padding_left + "px";
				image.style.width = gna + "px";
				image.style.height = "";
			}
		
			image.style.top = (width * 0.35 - image.height) + top + "px";
			image.style.zIndex = zIndex;
			if ( x < 0 )
			{
				zIndex++;
			}
			else
			{
				zIndex = zIndex -1;
			}
			x += 150;
		}
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.zIndex = 100;

	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;

	/* Call subFunction */
	moveTo(current);
}
  Hi there, I wrote a javascript effect - based on the Version of Michael Perry - that presents images like (kind of) Apples CoverFlow. The main problem I have is the overall performance. It also varies on different Browsers. A smaller Problem would be, that it is incompatible to Safari running on a Mac. Safari under WinXP is fine. What improvements would you make? To see the effect in action visit: http://imageflow.finnrudolph.de
  2007-10-25T14:54:20+00:00
  108
  JavaScript
  test
  16
  ImageFlow - something like CoverFlow in Javascript
  
  2010-02-03T17:19:41+00:00
  245
  
    
      
      108
      WOW! that's some nice effects, really impressive!
Indeed it does not work in Safari on Mac
      2007-10-25T15:49:30+00:00
      542
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      1
      macournoyer
      http://macournoyer.com
    
    
      
      108
      I'm using safari v3 and it works just as it does in Camino. Performance isn't that great but hey it is CoverFlow in the browser. Pretty amazing JS. I don't have any ideas on refactoring.
      2007-10-26T20:15:02+00:00
      558
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      208
      Etandrib
      
    
    
      ## Javascript [javascript]
/* Set some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";
var img_h = 0;
var img_w = 0;
var img_percent = 0;
var z = 0;
var xs = 0;
var image = 0;
var new_img_h = 0;
var new_img_top = 0;

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

/* Get width of the images div container */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	if (target < current-1 || target > current+1)
	{
		moveTo(current + (target-current)/3);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function moveTo(x)
{
	current = x;

	/* do stuff with the images div */
	var padding_left = document.getElementById("imageflow").offsetLeft;
	var div = document.getElementById("images");
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var max = div.childNodes.length;
	var zIndex = max;

	for (index = 0; index < max; index++)
	{
		image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			z = Math.sqrt(10000 + x * x)+100;
			xs = x / z * size + size;
			
			/* Get current image properties */
			img_h = image.height;
			img_w = image.width;
			
			/* Check source image format. Get image height minus reflection height! */
			switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
			{
				/* Landscape format */
				case true:
					img_percent = 118;
					break;

				/* Portrait and square format */
				default:
					img_percent = 100;
					break;
			}
			
			/* Process new image height and top spacing */
			new_img_h = (img_h / img_w * img_percent) / z * size;
			new_img_top = (width * 0.35 - new_img_h) + top + ((new_img_h / (reflection_p + 1)) * reflection_p);

			/* Set new image properties */
			image.style.left = xs - (img_percent / 2) / z * size + padding_left + "px";
			image.style.height = new_img_h + "px";
			image.style.width= "";
			image.style.top = new_img_top + "px";
			image.style.zIndex = zIndex;

			if ( x < 0 )
			{
				zIndex++;
			}
			else
			{
				zIndex = zIndex -1;
			}
			x += 150;
		}
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.width = width + "px";
	captionTarget.style.zIndex = 10000;
	
	/* Call subFunction */
	moveTo(current);

	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}
      108
      I made some changes on it that slightly improved the performance. The biggest improvement has been achieved by putting the image.height/image.width calls in variables, instead of recalling them two times within the slave. I also changed the if/else to a switch/case (no idea if this improved anything ;D). And I defined the variables used inside the for-slave as global variables. Those were lokal variables before an redefined on each loop... perhaps this has improved something?! And I added a dynamically generated (server sided PHP) reflection to the images: http://imageflow.finnrudolph.de/
      2007-11-04T20:38:21+00:00
      717
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      245
      admiralquade
      
    
    
      
      108
      It doesn't work on Firefox over Linux.
      2007-11-05T00:48:19+00:00
      720
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Carlos
      
    
    
      
      108
      @ Carlos: Hmmm, I only tested on a machine running WindowsXP SP2: Firefox 2.0.0.9 = OK, Safari 3.0.3 = OK, InternetExplorer 7.0.5730.11 = OK, Opera 
9.24 = OK... What exactly doesn't work on Firefox and which version do you run?
      2007-11-05T07:35:41+00:00
      722
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Finn
      
    
    
      /* Define some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";
var img_h = 0;
var img_w = 0;
var img_percent = 0;
var z = 0;
var xs = 0;
var image = 0;
var new_img_h = 0;
var new_img_top = 0;
var x = 0;

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

/* Get width of the images div container */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	
	switch (target < current-1 || target > current+1) 
	{
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			break;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function duff(index, x, left, top, width, size, zIndex){

	image = div.childNodes.item(index);
	if (image.nodeType == 1)
	{

		z = Math.sqrt(10000 + x * x)+100;
		xs = x / z * size + size;
			
		/* Get current image properties */
		img_h = image.height;
		img_w = image.width;
			
		/* Check source image format. Get image height minus reflection height! */
		switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
		{
			/* Landscape format */
			case true:
				img_percent = 118;
				break;

			/* Portrait and square format */
			default:
				img_percent = 100;
				break;
		}
			
		/* Process new image height and top spacing */
		new_img_h = (img_h / img_w * img_percent) / z * size;
		new_img_top = (width * 0.35 - new_img_h) + top + ((new_img_h / (reflection_p + 1)) * reflection_p);

		/* Set new image properties */
		image.style.left = xs - (img_percent / 2) / z * size + left + "px";
		image.style.height = new_img_h + "px";
		image.style.top = new_img_top + "px";

		/* Set image layer through zIndex */
		switch ( x < 0) 
		{
			case true:
				zIndex = zIndex + index;
				break;

			default:
				zIndex = zIndex - index;
				break;
		}
		image.style.zIndex = zIndex;

		x = x + 150;
	}
	return x;
}

function moveTo(x)
{
	current = x;
	div = document.getElementById("images");

	/* do stuff with the images div */
	var left = document.getElementById("imageflow").offsetLeft;
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var iterations = div.childNodes.length;

	/* Duff's Device - JavaScript implementation
	   http://www.websiteoptimization.com/speed/10/10-18.txt */

	var index=0;
	var n = iterations % 8;

	if (n>0) {
		do 
		{
			x=duff(index++, x, left, top, width, size, iterations);
		}
		while (--n);
	}
	n = parseInt(iterations / 8);
	if (n>0) {
		do 
		{
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
		}
		while (--n);
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.width = width + "px";
	captionTarget.innerHTML = document.getElementById(captionId).innerHTML;
	
	/* Call subFunction */
	moveTo(current);
}
      108
      *phew* I implemented a improved JavaScript Implementation of a Duff's Device Loop. That was kind of tricky... At this moment i couldn't think of anything else to improve. Now the main limiting factor should be the rendering engine of the browser. The speed scales in relation to the image quality of resized images: IE is fast, but the resized images look messy, Opera and Safari do a way better job, but are therefore somewhat slower... This version is testing only at the moment, you can check it out here: http://tinyurl.com/2ywabh
      2007-11-06T00:47:52+00:00
      749
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      245
      admiralquade
      
    
    
      var count = iterations;

while (count > 0)
{
  switch (count % 8)
  {
    case 0:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 7:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 6:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 5:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 4:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 3:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 2:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 1:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
  }
}
      108
      This might offer a slight improvement over the initial remainder loop. Please measure to be sure. The optimization will probably get lost among all of the image resizing.

(WARNING: untested code)
      2007-11-06T12:19:49+00:00
      761
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Michael Perry
      http://adventuresinsoftware.com
    
    
      ## Javascript [javascript]
/* Define global variables */
var caption_id = "i1";
var new_caption_id = "";
var current = 0;
var target = 0;
var timer = 0;
var array_images = new Array();

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

function step()
{
	switch (target < current-1 || target > current+1) 
	{
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			break;
	}
}

function glideTo(x, new_caption_id)
{	
	/* Animate gliding to new x position */
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	/* Display new caption */
	caption_id = new_caption_id;
	caption = document.getElementById(caption_id)
	if (caption) caption_div.innerHTML = caption.innerHTML;
}

function moveTo(x)
{
	current = x;
	var zIndex = max;
	
	/* Loop */
	for (var index = 0; index < max; index++)
	{ 
		var image = img_div.childNodes.item(array_images[index]);
		var z = Math.sqrt(10000 + x * x)+100;
		var xs = x / z * size + size;
		
		/* Get current image properties */
		var img_h = image.height;
		var img_w = image.width;
		
		/* Check source image format. Get image height minus reflection height! */
		switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
		{
			/* Landscape format */
			case true:
				var img_percent = 118;
				break;

			/* Portrait and square format */
			default:
				var img_percent = 100;
				break;
		}
		
		/* Process new image height and top spacing */
		var new_img_h = (img_h / img_w * img_percent) / z * size;
		var new_img_top = (images_width * 0.33 - new_img_h) + images_top + ((new_img_h / (reflection_p + 1)) * reflection_p);

		/* Set new image properties */
		image.style.left = xs - (img_percent / 2) / z * size + imageflow_left + "px";
		image.style.height = new_img_h + "px";
		image.style.width= "";
		image.style.top = new_img_top + "px";

		/* Set image layer through zIndex */
		switch ( x < 0) 
		{
			case true:
				zIndex++;
				break;

			default:
				zIndex = zIndex -1;
				break;
		}
		image.style.zIndex = zIndex;

		x += 150;
	}
}

/* Main function */
function refresh()
{
	/* Cache document objects in global script variables */
	img_div = document.getElementById("images");
	caption_div = document.getElementById("captions");
	
	/* Change images div properties */
	images_width = img_div.offsetWidth;
	var images_height = images_width * 0.33;
	img_div.style.height = images_height + "px";

	/* Change captions div properties */
	caption_div.style.top = img_div.offsetTop + images_height + "px";
	caption_div.style.width = images_width + "px";
	caption_div.innerHTML = document.getElementById(caption_id).innerHTML;
	
	/* Cache global variables, that only change on refresh */
	imageflow_left = document.getElementById("imageflow").offsetLeft;
	images_top = img_div.offsetTop;
	size = images_width * 0.5;
	max = img_div.childNodes.length;
	
	/* Cache correct node type indices in an array */
	var count=0;
	for (var index = 0; index < max; index++)
	{ 
		var image = img_div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			array_images[count] = index;
			count++;
		}
	}
	max = array_images.length;

	/* Display images in current order */
	moveTo(current);
}

/* Show/hide functions */
function show(id) {
	var element = document.getElementById(id);
	element.style.visibility = "visible";
}
function hide(id) {
	var element = document.getElementById(id);
	element.style.visibility = "hidden";
}

/* Hide loading div and show the images div */
window.onload = function() {
	hide('loading');
	show('images');
	refresh();
}

window.onresize = refresh;

/* JavaScript mouse wheel support */
function handle(delta) {

	var caption_id_int = caption_id.substr(1);
	caption_id_int = parseInt(caption_id_int);

	switch (delta > 0) 
	{
	case true:
		if(target != 0)
		{
			target = target + 150;
			new_caption_id = 'i' + (caption_id_int - 1);
		}
		break;

	default:
		if(caption_id_int < max)
		{
			target = target - 150;
			new_caption_id = 'i' + (caption_id_int + 1);
			break;
		}
	}
	glideTo(target, new_caption_id);
}

/* JavaScript mouse wheel support */
function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
      108
      Okay... I cached document objects and other stuff, that only has to run once in global variables. I also cached correct node type indices in an array... I think there is no more to improve on this one. The main bottleneck is definitely the render engine of the browser. Fastest is Firefox 2.0.0.9 and slowest is Opera 9.24... Try it by yourself: http://imageflow.finnrudolph.de/

It runs on a Mac with the LATEST version of Safari... I tried ;D
      2007-11-07T16:32:34+00:00
      787
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      245
      admiralquade
      
    
    
      
      108
      Hi

I was hoping that some one could help me with a project I am working on.  I love imageflow. Thanks so much for all the hard work that has been done.  I would like to make imagflow work with Videobox.  Videobox is a script, which shows your videos in the page with an overlay.  I think that the to together would be a very cool effect.

http://videobox-lb.sourceforge.net/

Any help very appreciated

Daniel  
      2007-11-12T01:21:56+00:00
      836
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Daniel
      
    
    
      
      108
      Great script, but how can I make it so that the images are only scaled upto their maximum size to avoid stretching them above the max file size?

Thanks

Oli
      2007-11-15T12:35:00+00:00
      851
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Oli Griffiths
      http://www.organicdevelopment.co.uk
    
    
      
      108
      @ Oli and Daniel: I think, that Refactor :my => 'code' is not the place, to discuss such questions. It's refactoring only ;D 

There is a new Version available and you can simply drop me a line in my Shoutbox if you have technical questions on implementing ImageFlow into your application: http://shoutbox.finnrudolph.de/

And I currently work on a documentation of ImageFlow - Check it out: http://imageflowdocu.finnrudolph.de/

Finn
      2007-11-22T13:09:44+00:00
      912
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      245
      admiralquade
      
    
    
      
      108
      ImageFlow is the coolist effect on the web.  However, I'm having a hard time adding basic rollover navigation script to site with the imageflow effect. Please advise

      2008-03-20T15:51:24+00:00
      4204
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      kingistheone
      wkbart.com
    
    
      
      108
      You should change the JS so that the default image is one in the center - so there are images on either side of the center one to begin with.
      2008-04-11T13:44:23+00:00
      4834
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      k
      
    
    
      
      108
      Do you think it would be possible to use this as a container for iFrames instead of images?  I'm looking at the code now and I want to use it as a navigation system for my website, but I'm not sure where to begin with edits... it seems like calls to getElementById could refer to arbitrary files instead of images, but I see alot of places where this would break down.  Thoughts?
      2008-12-23T20:02:51+00:00
      134878
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Stephen
      
    
    
      
      108
      You might want to check out this implementation using jquery and applying real perspective to the images:
http://flow.momolog.info
Works with Chrome, Safari, Opera and Firefox, feedback is welcome!
Cheers, Alex
      2010-01-18T18:29:23+00:00
      417736
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      Alexander
      http://www.momolog.info
    
    
      
      108
      how do you put images into it?
      2010-02-03T17:19:40+00:00
      436289
      JavaScript
      0
      0
      On ImageFlow - something like CoverFlow in Javascript
      
      bc