Load background.image sequence from folder with Javascript

Question

i'm tring to make a javascript source that load all images in a folder as backgroundImage of my div

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(/web/images/001.png)');
    });
</script>

How i can load all images (.png) in my folder (web/images) as background-image of a div?

Thanks for support, M.

Is there any pattern in the files you want to load? is it sequential? eg.: 001.png, 002.png, 003.png? Do you want to use all images at the same time or do you want to have an interval between them? — nanndoj, Mar 05 '15 at 11:33
If you add / (slash) at the begening of path, browser will search file in example.com/web/images/001.png — hywak, Mar 05 '15 at 11:34
So your background will change from one image to another. am i right? — Shridhar, Mar 05 '15 at 11:34

score 1 · Answer 1 · answered Mar 05 '15 at 11:43

1

Try something like this:

$(document).ready(function() {
    var imgno=1;
    for(var imgno=1;imgno<50;imgno++){
       $('div').css({'width':'200px','height':'200px','background-image': 'url(/web/images/'+imgno+'.png)'});
    }

});

answered Mar 05 '15 at 11:43

Pioter

465
3
8
21

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

refer this link https://stackoverflow.com/a/18480589/4599982 and you can use jquery setTimeout(settimeout ) funcion for change of background after particular time.

edited May 23 '17 at 11:52

Community

1
1

answered Mar 05 '15 at 11:52

Shridhar

339
2
15

nanndoj · Accepted Answer · 2015-03-05T12:21:19.587

1

If you want to change the background using a interval you should try this

$(document).ready(function() {
    // Function to add leading zeroes
    function pad(num, size) {
        var s = num + "";
        while (s.length < size) s = "0" + s;
        return s;
    }

    // Variable to store the current image index
    var currentIdx = 1; 
    var max = 200; // Qtd of images in the folder

    setInterval(function() {
        // Reset the index when overflow
        if(currentIdx > max) currentIdx = 1;
        // Change the background
        $('body').css('background-image', 'url(/web/images/' + pad(currentIdx,4) + '.png)');
        currentIdx ++;
    }, 5000); // 5000ms == 5 seconds
});

Here is a Working Sample

edited Mar 05 '15 at 12:21

answered Mar 05 '15 at 11:56

nanndoj

6,580
7
30
42

Hi, i've problem with your source, my images are from 0001.png to 0200.png, how i can make your script work? Thanks. – Mirko Brombin Mar 05 '15 at 12:10
Just change the pad number to 4 `pad(currentIdx,4)`, and set the `max` variable to 200 – nanndoj Mar 05 '15 at 12:21

Load background.image sequence from folder with Javascript

3 Answers3