/* 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);
}
Refactorings
No refactoring yet !
macournoyer
October 25, 2007, October 25, 2007 15:49, permalink
WOW! that's some nice effects, really impressive!
Indeed it does not work in Safari on Mac
Etandrib
October 26, 2007, October 26, 2007 20:15, permalink
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.
admiralquade
November 4, 2007, November 04, 2007 20:38, permalink
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/
/* 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;
}
Carlos
November 5, 2007, November 05, 2007 00:48, permalink
It doesn't work on Firefox over Linux.
Finn
November 5, 2007, November 05, 2007 07:35, permalink
@ 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?
admiralquade
November 6, 2007, November 06, 2007 00:47, permalink
*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);
}
Michael Perry
November 6, 2007, November 06, 2007 12:19, permalink
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)
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;
}
}
admiralquade
November 7, 2007, November 07, 2007 16:32, permalink
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
/* 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;
Daniel
November 12, 2007, November 12, 2007 01:21, permalink
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
Oli Griffiths
November 15, 2007, November 15, 2007 12:35, permalink
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
admiralquade
November 22, 2007, November 22, 2007 13:09, permalink
@ 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
kingistheone
March 20, 2008, March 20, 2008 15:51, permalink
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
k
April 11, 2008, April 11, 2008 13:44, permalink
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.
Stephen
December 23, 2008, December 23, 2008 20:02, permalink
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?
Alexander
January 18, 2010, January 18, 2010 18:29, permalink
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
bc
February 3, 2010, February 03, 2010 17:19, permalink
how do you put images into it?
Kristian Mandrup
February 20, 2010, February 20, 2010 16:24, permalink
It is a bit sad that the reflection is done using php. First, it requires round trips to the server. Second it requires PHP installed on the server. I would recommend using reflection.js (http://www.deensoft.com/lab/protoflow/) or reflex.js (http://www.netzgesta.de/reflex/) instead. A pure javascript solution, Much more portable and faster too I'm sure ;)
Elmer Bulthuis
November 27, 2010, November 27, 2010 21:16, permalink
check this out:
http://coulisse.luvdasun.com/
it's not finished yet, but it's going to be soon.
clonecd265
May 9, 2011, May 09, 2011 00:30, permalink
It never troubles the wolf how many the sheep may be.
Strattera Generikum
June 28, 2011, June 28, 2011 08:00, permalink
Heads I win, Tails you lose.
clomoumbela
November 27, 2011, November 27, 2011 09:16, permalink
mass college of pharmacy ce http://exclusiverx.com/products/cozaar.htm clomoumbela 3789658 sources of methyl paraben in pharmacy
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