Two Problems...

[Mighty]

Hi Folks,

I'll show you my code first:

<!-- Preload the images -->
if (document.images)
{

	// Declare array to store images
	var mainArray = new Array(5);
	var squareArray = new Array(5,4);
	
	// Loop through and add all the images
	for (i = 0; i < 5; i++) {
	
		// Load the main images
		mainArray[i]= new Image(534,235);
		mainArray[i].src="/images/home/main" + (i + 1) + ".jpg";
		
		// Load the square images
		for (j = 0; j < 4; j++) {
			squareArray[i,j]= new Image(116,116);
			squareArray[i,j].src="/images/home/square" + (i + 1) + "_" + (j + 1) + ".jpg";
		}
		
	}

}

// This function changes the images on the page
function swapImages()
{

	for (i = 0; i < mainArray.length; i++) {
		timer = setTimeout("swapAllImages(" + i + ")", 5000);
	}

}

function swapAllImages(imgNum) 
{
	// Change the main image
	crossfade(document.getElementById('main'), mainArray[img]um[/img].src, '3', 'Main Image ' + imgNum);
	
	// Change the 4 square images
	crossfade(document.getElementById('square1'), squareArray[img]um, 0[/img].src, '3', 'Square Image ' + (imgNum + 1) + "_1");
	crossfade(document.getElementById('square2'), squareArray[img]um, 1[/img].src, '3', 'Square Image ' + (imgNum + 1) + "_2");
	crossfade(document.getElementById('square3'), squareArray[img]um, 2[/img].src, '3', 'Square Image ' + (imgNum + 1) + "_3");
	crossfade(document.getElementById('square4'), squareArray[img]um, 3[/img].src, '3', 'Square Image ' + (imgNum + 1) + "_4");
}

I am trying to do the following:

1. Preload all the images that I require for this particular HTML page.
2. Every five seconds change 5 images on the page to the next one in the sequence.

I have tried to use the setTimeOut to do this but I see the flaw in my script. I have a loop setup which calls the setTimeout with a delay of 5 seconds. But I understand that it does the four calls almost simultaneously.

When the page loads I need to wait 5 seconds and then call the swapAllImages function, then wait another 5 seconds and call it again - all the while looping through the image arrays.

I also need to encompass that whole thing is a while loop so that it goes through that process continually while the page is open.

Any suggestions on how I can do all that would be greatly appreciated.



My second problem is what while this crossfade function is brilliant, it will only work on one image - can't seem to change more than one image at the same time. Can anyone recommend a way to fade in another image on 5 images at the same time.

Mighty

 

[Mighty]

Just thought of a solution to my first problem - multiply the delay by the loop counter....

// This function changes the images on the page
function swapImages()
{

    for (i = 0; i < mainArray.length; i++) {
        timer = setTimeout("swapAllImages(" + i + ")", (5000 * (i + 1)));
    }

}

Can test the code out now becuase it is at home but that should work shouldn't it.


Just need some advice on the fade on/in of images then.

Mighty

 

[tsuji]

Just find odd at the array part. (The rest I have not read through for the moment.)

[1]>var squareArray = new Array(5,4);

This may not be what you expect be. Better just declare it as array and then beef it along later.

[tt]var squareArray=new Array();[/tt]

[2] Then modify the subsequent reference to it accordingly.

>squareArray[i,j]= new Image(116,116);
>squareArray[i,j].src="/images/home/square" + (i + 1) + "_" + (j + 1) + ".jpg";

[tt]squareArray[j]= new Image(116,116);[/tt]
[tt]squareArray[j].src="/images/home/square" + (i + 1) + "_" + (j + 1) + ".jpg";[/tt]

Also have not the time to understand the right-hand-side of new Image(116,116) etc...

 

[tsuji]

[1 bis] Also I think you have to establish the entry being array as well to be correct. So it is this.
[tt]
var squareArray=new Array(5);
for (var i=0;i<5;i++) {
squareArray=new Array(4);
}[/tt]

 

[monksnake]

For the every 5 seconds a new call to the function, use the setInterval method, don't put the statement in any function and it's basically like the setTimeout method:

setInterval("swapAllImages(" + i + ")", 5000);

I'm not sure if you have the preload working, but if you don't one way is just to load the pictures up at the top of your page in a div that is set off the screen.

Use absolute positioning and set top:-3000px and left:-3000px and load up each picture offscreen.


[small]"I see pretty girls everywhere I look, everywhere I look, everywhere I look. - Band song on movie "The Ringer"[/small]
<.