Question

I just learned the bare minimum needed, to generate thumbnail images in my ebay + website listings. Basically, I have up to 12 pictures in a listing, and to save having to write out the URL for each picture when I create a new listing, I’ve set it up that I only need to write the filename once (variable “picname”), and number of pictures (variable “picnum”), and javascript does the rest. It works fine, but seems very long winded.

How do I shorten/optimize the code? I’m sure some kind of loop would do the trick, but after spending the whole day searching and a lot of trial and error, I just can’t figure it out.

I would like to shorten/optimize the following block of code into a loop:

imagenum=1;
if (imagenum <= picnum) {image1 = new Image(); image1.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb1 = new Image(); thumb1.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image2 = new Image(); image2.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb2 = new Image(); thumb2.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image3 = new Image(); image3.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb3 = new Image(); thumb3.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";;imagenum++;}
if (imagenum <= picnum) {image4 = new Image(); image4.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb4 = new Image(); thumb4.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image5 = new Image(); image5.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb5 = new Image(); thumb5.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image6 = new Image(); image6.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb6 = new Image(); thumb6.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image7 = new Image(); image7.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb7 = new Image(); thumb7.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image8 = new Image(); image8.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb8 = new Image(); thumb8.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image9 = new Image(); image9.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb9 = new Image(); thumb9.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image10 = new Image(); image10.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb10 = new Image(); thumb10.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image11 = new Image(); image11.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb11 = new Image(); thumb11.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}
if (imagenum <= picnum) {image12 = new Image(); image12.src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb12 = new Image(); thumb12.src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";imagenum++;}

I’m assuming I need something along the lines of the following:

for (imagenum=1; imagenum<picnum; imagenum++) {image(imagenum) = new Image(); image(imagenum).src = "http://www.20thcenturyglass.com/auctions/2012/"+picname+" ("+imagenum+").jpg"; thumb(imagenum) = new Image(); thumb(imagenum).src = "http://www.20thcenturyglass.com/thumbs/2012/"+picname+" ("+imagenum+").jpg";}

However I obviously have the syntax wrong as that doesn’t work. I don’t know how to make the variable name increment with each cycle of the loop, and I would very much appreciate some help!

Answer 1

Use an array. Something like this:

var images = [];
for (var i = 0; i < picnum; i++)
{
    images[i] = {
        Image: new Image(),
        Thumb: new Image()
    };

    images[i].Image.src = ...;
    images[i].Thumb.src = ...;
}