homepage Welcome to WebmasterWorld Guest from 54.227.20.250
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

5+ Year Member



 
Msg#: 3777924 posted 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

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3777924 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3777924 posted 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

5+ Year Member



 
Msg#: 3777924 posted 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