Using javascript to put images into an array?

Question

I am looking for a way to put all of the images into an array and then use them in a 'slideshow'... Heres what I have so far:

HTML

<div id="header">
</div>

JS

function onload() {
    var i = 0;
    var imageList= [<?php
        $dir='/assets/splashs/';
        $files = scandir($dir);
            foreach((array)$files as $file){
                if($file=='.'||$file=='..') continue;
            $fileList[]=$file;
        }
    ?>];

    setInterval(function() {
        document.getElementById("header").style.backgroundImage="url(imagelist+i)";
        i++
    },3000);
}

Note: imagelist was taken from another thread

EDIT:

I get the error: Uncaught SyntaxError: Unexpected token < global.js:3

The current code doesn't work, so I wondered if any of you have anything different or are able to fix it?

PHP code inside `var = imageList = []` is not create output, you should use `echo json_encode($fileList)` — Girish, Mar 04 '14 at 13:24
@user3352340, `$fileList` would be empty so return `false` and why you are using `setInterval`? — Girish, Mar 04 '14 at 13:38
So, the problem you are having is populating the Javascript array dynamically using PHP? Or you are having problems with figuring out how to cycle that array in Javascript, or displaying the images? — Xotic750, Mar 04 '14 at 13:38

score 0 · Answer 1 · answered Mar 04 '14 at 13:21

0

Probably problem is here:

document.getElementById("header").style.backgroundImage="url(imagelist+i)";

Should be changed to

document.getElementById("header").style.backgroundImage="url("+imagelist[i]+")";

Hope it helps.

answered Mar 04 '14 at 13:21

Alexey Ogarkov

2,916
21
28

score 0 · Answer 2 · answered Mar 04 '14 at 13:30

0

     function onload() {
         var i = 0;
         var imageList = [ <?php echo implode(",", glob('./assets/splashs/*.*')); ?> ];

         setInterval(function () {
             document.getElementById("header").style.backgroundImage = "url("+imagelist[i]+")";
             if (i === (imageList.length - 1)) {
                 i = 0;
             } else {
                 i++
             }
         }, 3000);
     }

I've added a reset when the last image in the array is displayed it returns to the first. + tidied up your loop for images.

answered Mar 04 '14 at 13:30

Yusaf Khaliq

3,033
10
37
80

Seems like an ideal time to use the mod `%` operator. – Xotic750 Mar 04 '14 at 13:36
I just googled that and could you please show me how you'de implement that in my code. thanks @Xotic750 :) . gonna try learning how to do that later. – Yusaf Khaliq Mar 04 '14 at 13:44
Sure, do you want to create a question and I will post an answer, or perhaps take a look at http://stackoverflow.com/questions/8900652/what-does-do-in-javascript – Xotic750 Mar 04 '14 at 13:48
And here is an example that is relevant http://stackoverflow.com/a/22175919/592253 – Xotic750 Mar 04 '14 at 18:05
thanks :) quite interesting, Funny I've never really needed it ever so not come across it. – Yusaf Khaliq Mar 04 '14 at 19:09

Using javascript to put images into an array?

2 Answers2