admiralquade

[JavaScript] On ImageFlow - something like CoverFlow in Javascript

2007-11-22T13:09:44-08:00

@ 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

[JavaScript] On ImageFlow - something like CoverFlow in Javascript

2007-11-07T16:32:34-08:00

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

## 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;

[JavaScript] On ImageFlow - something like CoverFlow in Javascript

2007-11-06T00:47:52-08:00

*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

/* 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);
}

[JavaScript] On ImageFlow - something like CoverFlow in Javascript

2007-11-04T20:38:21-08:00

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/

## 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;
}

[JavaScript] ImageFlow - something like CoverFlow in Javascript

2007-10-25T14:54:20-07:00

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

## 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);
}