Slide Show issue

[Hammy]

I have ceated a slide show, by querying a database for images with Cold Fusion, then used a cfloop to create two javascript arrays; one to hold each image file name, and one to hold the product associated with that file.

I have then created a slide show, which changes theimage every 5 seconds, and places the product name over the currently displayed i mage in a div tag. The problem is, with my current setup, the product name gets disaplyed before theimage has fully loaded, and can cause it to ghet out of "sync".

Here's my current setup; where imageCounter tracks the current position in the arrays,

function slideShow () {
// display the current image from the imageHolder array in the slide show image
document.images.slide.src = "images/product_shots/"+imageHolder[imageCounter];
document.getElementById("CurrentProductName").innerHTML = imageProduct[imageCounter];
//advance the imageCounter variable to show the next image next time through
imageCounter ++;
// if the image counter is greater than the max # of images, set it back to 0
if (imageCounter > imageMax) {
imageCounter = 0;
}
//call the slide show function every 3 seconds
slideshowTimer = setTimeout("slideShow()", 5000);
}

So, I thought, well that's fine, I'll change the line that does the div tag's innerHTML to an onload trigger to call a function that will write the product name then. SO I came up with this.....

function slideShow () {
// display the current image from the imageHolder array in the slide show image
document.images.slide.src = "images/product_shots/"+imageHolder[imageCounter];
document.images.slide.onload = displayProduct(imageCounter);
//advance the imageCounter variable to show the next image next time through
imageCounter ++;
// if the image counter is greater than the max # of images, set it back to 0
if (imageCounter > imageMax) {
imageCounter = 0;
}
//call the slide show function every 3 seconds
slideshowTimer = setTimeout("slideShow()", 5000);
}

function displayProduct(count) {
document.getElementById("CurrentProductName").innerHTML = imageProduct[imageCounter];
}

As you can see, the innerHTML doesn't get written until after the image loads. This works fine in NetScape and Opera, however in IE, it never goes past the first slide.

Then I tried this....

function slideShow () {
// display the current image from the imageHolder array in the slide show image
currentSlide = new Image();
currentSlide.src = "images/product_shots/"+imageHolder[imageCounter];
currentSlide.onload = displayProduct(imageCounter);
}

function displayProduct(count) {
document.images.slide.src = currentSlide.src;
document.getElementById("CurrentProductName").innerHTML = imageProduct[imageCounter];
//advance the imageCounter variable to show the next image next time through
imageCounter ++;
// if the image counter is greater than the max # of images, set it back to 0
if (imageCounter > imageMax) {
imageCounter = 0;
}
//call the slide show function every 3 seconds
slideshowTimer = setTimeout("slideShow()", 5000);
}

Which works in all three, however IE still displays an error (event hough it is working) error is "Not Implemented" when this line is called:

currentSlide.onload = displayProduct(imageCounter);

Can anyone please help me set this rig up, so it will only display the the innerHTML once the slide that is called for loads, without these errors?

Thanks,
Hammy

[Khalid Ali]

I think this will do the trick

isntead of this line
document.images.slide.onload = displayProduct(imageCounter);

use this

if(document.images.slide.complete){
displayProduct(imageCounter);
}

[Hammy]

Thanks for the input, but that didn't help. With the second set of code, that caused it to not display the first product name, then it always did, hwoever caused the sync problem again. I am assuming because after the first slide, you line IS true, always and it ends up basically being the same thing I have.

In the third set of code, it cause the same "not implemented" error with IE.

Hammy