Is there a way to simplify a 100+ image array without PHP?

Question

For the record, I'm not too great at Java yet, I'm just starting out with it. Currently, I'm working on a small personal project that randomly displays images from a folder for 5 seconds before transitioning to another one. I'd like to add as many images as possible, but once I make an array of over 100+ objects, managing it, as well as the files, becomes quite a chore, especially if I want to start rearranging files or add/remove some.

I've already had to start renaming the files to sequential numbers to get the random cycling to work, which has been a chore in it's own, so I was curious if there was a way to at least shorten the array and have it cycle through the files. Or maybe there's an easier solution that doesn't require the array at all since the files are named sequentially with numbers.

This is what the code looks like so far:

var delay=5000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

    randomimages[0]="1.png"
    randomimages[1]="2.jpg"
    randomimages[2]="3.png"
    randomimages[3]="4.png"
    randomimages[4]="5.png"
    randomimages[5]="6.png"
    randomimages[6]="7.png"
    randomimages[7]="8.jpg"
    randomimages[8]="9.png"
    randomimages[9]="10.png"
    // Cut out the 100 extra lines
    // Continues like this for multiple lines and variates between PNG and JPG images
    randomimages[103]="104.jpg"

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

document.write('<div><img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'"></div>')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

Any help is appreciated.

The title of the question says "without PHP" but in the body of the question you seem to be asking a general programming question. What, if anything, do you want help with regarding PHP? Or do you just want to know how to use a for-loop to simplify your hundreds of lines of code? — Ray Toal, Dec 22 '15 at 03:37
Probably should have clarified that part. When searching for answers to this problem, most of the solutions recommended PHP instead of Java. I don't have any experience in PHP, so it isn't really an option. I would just like to know how to simplify the array so I don't have a hundred lines of code for it, yeah. — SaitamaDoritoAdventure, Dec 22 '15 at 03:39
So you're using Java on the serverside then, not PHP, or do you mean Javascript, which is something completely different from Java ? — adeneo, Dec 22 '15 at 03:40
"the files are named sequentially with numbers", but you have some files with `.jpg` and some with `.png`, how to know about that without that record? — Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ, Dec 22 '15 at 03:40
Also, javascript and java are completely different...Just so you don't embarrass yourself telling someone you know java then try to use `var` when someone gives you a job. — TriHard8, Dec 22 '15 at 03:41
That's a good point. I suppose I could convert some of the images so they're all the same file type if that makes it easier to approach this. — SaitamaDoritoAdventure, Dec 22 '15 at 03:42
First you [get all files on the serverside](http://stackoverflow.com/questions/720751/how-to-read-a-list-of-files-from-a-folder-using-php), then you just output the filenames so javascript can read those as an array/object (hint: json), and you're golden, you get all the files currently in the folder, and you can name them whatever you want. — adeneo, Dec 22 '15 at 03:42
My bad, I know they're two different languages, I just forget sometimes and use Java as a shortened variation of JS. — SaitamaDoritoAdventure, Dec 22 '15 at 03:43
@adeneo That requires some PHP knowledge, doesn't it? Or is it simple enough that someone with no PHP experience could do that? — SaitamaDoritoAdventure, Dec 22 '15 at 03:45
You'd have to learn some things as you go, as many has done before you, but (clientside) javascript can't get the filenames from the folder, that should be done on the server, and it simplifies this a great deal as you don't have to hardcode filenames, you just get whatever is there instead, all your problems solved — adeneo, Dec 22 '15 at 03:46

score 0 · Accepted Answer · answered Dec 22 '15 at 04:30

Try this code:

var delay = 5000, //set delay in miliseconds
    count = 104,
    curindex = Math.floor(Math.random() * count),
    preload = [],
    img;
for (var n = 1; n <= count; n++) {
    img = new Image();
    img.src = n + '.png';
    preload.push(img);
}

document.write('<div><img name="defaultimage" src="' + (curindex + 1) + '.png"></div>')

function rotateimage() {
    var tempindex = Math.floor(Math.random() * count);
    if (curindex === tempindex) {
        curindex = (curindex === 0 ? 1 : curindex - 1);
    } else {
        curindex = tempindex;
    }
    document.images.defaultimage.src = (curindex + 1) + '.png';
}

setInterval("rotateimage()", delay);

There's no need to have an array like you said.

Is there a way to simplify a 100+ image array without PHP?

1 Answers1