looping through images in javascript

Question

I have a plugin that rotates 360 degrees around a set of images (300 to be precise). I want to know if I can use a for in loop or a for loop to cycle through all the images. Right now It's setup like this.

$("#spin").spritespin({
        width     : 510,
        height    : 327,
        frames    : 10,
        image     : [
                "360rotation/000.jpg",
                "360rotation/001.jpg",
                "360rotation/002.jpg",
                "360rotation/003.jpg",
                "360rotation/004.jpg",
                "360rotation/005.jpg",
                "360rotation/006.jpg",
                "360rotation/007.jpg",
                "360rotation/008.jpg",
                "360rotation/009.jpg",
                  ],

        animate   : true,
        loop      : true,
        frameTime : 60,
        fadeFrames : 20,
        fadeInTime : 0,
        fadeOutTime : 120
      });

This works but I don't want to type out all 300 images. How can I do this faster?

Since the images seem to be numbered continuously, you can use a loop to generate the names. — Felix Kling
– Felix Kling, Commented Jun 15, 2012 at 19:57

David Thomas · Accepted Answer · 2012-06-15 20:00:09Z

2

The easiest way, I guess, would be to populate an array based on the known start, and end, images:

function namePad(num){
    if (num < 10){
        return '00' + num;
    }
    else if (num >=10 && num < 100){
        return '0' + num;
    }
    else {
        return num;
    }
}

var imageArray = [];

for (var i=0; i < 300; i++){
    imageArray.push('360rotation/' + namePad(i) + '.jpg');
}

JS Fiddle proof of concept.

answered Jun 15, 2012 at 20:00

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drazen · Accepted Answer · 2012-06-15 20:09:20Z

0

Maybe something like

var images = new Array();

for (i = 0; i < (n = 301); i++) {
  images.push("360rotation/00" + i + ".jpg")
}

$("#spin").spritespin({
    width     : 510,
    height    : 327,
    frames    : 10,
    image     : images,

    animate   : true,
    loop      : true,
    frameTime : 60,
    fadeFrames : 20,
    fadeInTime : 0,
    fadeOutTime : 120
  });

answered Jun 15, 2012 at 20:09

Drazen

2,8462 gold badges28 silver badges42 bronze badges

1 Comment

Drazen Over a year ago

i just saw David Thomas' answer.

Collectives™ on Stack Overflow

looping through images in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related