homepage Welcome to WebmasterWorld Guest from 54.234.225.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:3777926
 12:07 am on Nov 1, 2008 (gmt 0)

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




msg:3777979
 2:28 am on Nov 1, 2008 (gmt 0)

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




msg:3777982
 2:41 am on Nov 1, 2008 (gmt 0)

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




msg:3778130
 9:32 am on Nov 1, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved