For Loop Problem

I'm trying to use a For loop to list a bunch of photos in a gallery

[j2trumpet]

I'm trying to insert a bunch of thumbnail photos into a table (very wide using CSS overflow) that will change the source of a full-size image below the table when clicked. I can get the thumbnails to show up, but the full-size image won't change when the thumbnails are clicked. And yes, the name and ID of the photo I want to replace is set to "photo." Please help me! Here's the code I've been trying to get work:

var photos = new Array();
photos[0] = "001";
photos[1] = "002";
photos[2] = "003";
photos[3] = "004";
photos[4] = "005";
photos[5] = "006";
photos[6] = "007";
photos[7] = "008";
photos[8] = "009";
photos[9] = "010";
photos[10] = "011";
photos[11] = "012";
photos[12] = "013";
photos[13] = "014";
photos[14] = "015";
photos[15] = "016";
photos[16] = "017";
photos[17] = "018";
photos[18] = "019";
photos[19] = "020";
for (i=0;i<photos.length;i++)
{
function photoReplace() {
document.img.photo.src = "images/gallery/2007/2007_" + photos[i] + ".jpg";
}
document.write("<td><a onclick='photoReplace()'><img src='images/gallery/2007/thumbs/2007_" + photos[i] + "_thumb.jpg' /></a></td>");
}

[g1smd]

You are using relative URLs, and the URL is resolved by the browser.

Start the URL with / and include the full path counting from the root.

[daveVk]

var photos = new Array();
photos[0] = "001";
photos[1] = "002";
photos[2] = "003";
photos[3] = "004";
photos[4] = "005";
photos[5] = "006";
photos[6] = "007";
photos[7] = "008";
photos[8] = "009";
photos[9] = "010";
photos[10] = "011";
photos[11] = "012";
photos[12] = "013";
photos[13] = "014";
photos[14] = "015";
photos[15] = "016";
photos[16] = "017";
photos[17] = "018";
photos[18] = "019";
photos[19] = "020";
// moved out of loop added i parameter
function photoReplace(i) {
document.img.photo.src = "images/gallery/2007/2007_" + photos[i] + ".jpg";
}
for (var i=0;i<photos.length;i++)
{
document.write("<td><a onclick='photoReplace("+i+")'><img src='images/gallery/2007/thumbs/2007_" + photos[i] + "_thumb.jpg' /></a></td>");

}

[j2trumpet]

Between the two of you, I got my code working perfectly! Thank you so much!

I've got one much question if you'll indulge me. I'm noticing that it can take a few seconds to get the full-size image loaded and displayed if it's not already in the cache. I don't want to slow the load time of the page initially to load the images into the cache, so I'm wondering if there's an easy way to utilize some kind of "loading" image, like the spinning line circle I've seen elsewhere. I imagine this is an AJAX thing, but I'm still just trying to get the basics of Javascript down. Could you point me in the right direction? If not, I'm still really grateful for the help you've given me so far.