Javascript 4-image slideshow w/ arrays & setTimeout

Question

<script type=text/javascript>

var topLeftImages = ["op.jpg", "qa.jpg", "fl.jpg", "eatgr.jpg", "na.jpg", "ctcc.jpg", "na.jpg", "oacahu.jpg", "hc.jpg", "sup.jpg", "oa.jpg", "rffcc.jpg"];
var topRightImages = ["eatgr.jpg", "ulandscaping.jpg", "fp.jpg", "clf.jpg", "lss.jpg", "sup.jpg", "ulandlord.jpg", "lqbc.jpg", "lss.jpg", "lp.jpg", "ulandlord.jpg", "qa.jpg"];
var bottomLeftImages = ["poss.jpg", "un.jpg", "pocsik.jpg", "sep.jpg", "rms.jpg", "fp.jpg", "al.jpg", "un.jpg", "sep.jpg", "op.jpg", "al.jpg", "oacahu.jpg"];
var bottomRightImages = ["nup.jpg", "clf.jpg", "rffcc.jpg", "sla.jpg", "lqbc.jpg", "pocsik.jpg", "fp.jpg", "np.jpg", "lwtgr.jpg", "lqbc.jpg", "lcsik.jpg", "poss.jpg"];

for(var i = 0, l = topLeftImages.length; i < l; i++)
{
    setTimeout(function()
    {
        document.getElementById('myimage1').src = "images\\" + "op.jpg";
        document.getElementById('myimage2').src = "images\\" + topRightImages[i];
        document.getElementById('myimage3').src = "images\\" + bottomLeftImages[i];
        document.getElementById('myimage4').src = "images\\" + bottomRightImages[i];
    }, 10000);
}
</script>

Associated HTML:

<img id="myimage1" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" />
<img id="myimage2" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" />
<img id="myimage3" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" />
<img id="myimage4" src="http://www.hdwallpapers.in/walls/apple_sky_blue_aurora-wide.jpg" width="400" />

This code is meant to show four images, and every 10 seconds, switch all four images simultaneously, going through all of my images in my four arrays. The images are in the images/ directory above my HTML file that contains this code. For testing purposes, I changed myimage1 to change to op.jpg only. This works and correctly shows op.jpg. However, when querying the arrays, instead of the file names, I get undefined. That is problem number one.

Problem number two, when I change my for loop to a more normal looking one like:

for(var i = 0; i < l2; i++)

The script stops working entirely (doesn't show op.jpg and doesn't even try to change the images)... what the hell!

I'm using Firefox and Google Chrome for testing purposes.

possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Musa, Mar 08 '13 at 07:15
Could someone explain this to me please? I'm still not quite understanding what to do from the possible duplicate. I'm still learning JavaScript. — CODe, Mar 08 '13 at 07:23

gregjer · Accepted Answer · 2013-03-08T07:53:13.513

1

I suggest something like that instead:

<script type=text/javascript>
    $(document).ready(function () {

        var topLeftImages = ["op.jpg", "qa.jpg", "fl.jpg", "eatgr.jpg", "na.jpg", "ctcc.jpg", "na.jpg", "oacahu.jpg", "hc.jpg", "sup.jpg", "oa.jpg", "rffcc.jpg"];
        var topRightImages = ["eatgr.jpg", "ulandscaping.jpg", "fp.jpg", "clf.jpg", "lss.jpg", "sup.jpg", "ulandlord.jpg", "lqbc.jpg", "lss.jpg", "lp.jpg", "ulandlord.jpg", "qa.jpg"];
        var bottomLeftImages = ["poss.jpg", "un.jpg", "pocsik.jpg", "sep.jpg", "rms.jpg", "fp.jpg", "al.jpg", "un.jpg", "sep.jpg", "op.jpg", "al.jpg", "oacahu.jpg"];
        var bottomRightImages = ["nup.jpg", "clf.jpg", "rffcc.jpg", "sla.jpg", "lqbc.jpg", "pocsik.jpg", "fp.jpg", "np.jpg", "lwtgr.jpg", "lqbc.jpg", "lcsik.jpg", "poss.jpg"];

        var i = 0;
        var max = 12;

        setInterval(function()
        {
            var index = i % max;
            document.getElementById('myimage1').src = "images\\" + topLeftImages[index];
            document.getElementById('myimage2').src = "images\\" + topRightImages[index];
            document.getElementById('myimage3').src = "images\\" + bottomLeftImages[index];
            document.getElementById('myimage4').src = "images\\" + bottomRightImages[index];
            i++;
        }, 10000);
    });   
</script>

jsFiddle with some example images http://jsfiddle.net/ApfJz/8/

edited Mar 08 '13 at 07:53

answered Mar 08 '13 at 07:25

gregjer

2,823
2
19
18

This doesn't do anything at all in Firefox or Chrome. Can you provide a JSFiddle of this in action by chance? – CODe Mar 08 '13 at 07:27
works in both FF and Chrome for me, maybe you have missed something – gregjer Mar 08 '13 at 07:38
You have already said in your post that your script stopped to work completely. JsFiddle works for you? – gregjer Mar 08 '13 at 07:43
Have you tried Firebug in Firefox to debug if there are some errors on console? – gregjer Mar 08 '13 at 07:44
JSFiddle works... but when I post it into a test HTML file on my comp it doesn't work anymore. Any idea why that would be? It doesn't do anything in either FF or Chrome. – CODe Mar 08 '13 at 07:45
Your JSFiddle has **$(document).ready(function ()...**, your answer doesn't. Do I need that piece? – CODe Mar 08 '13 at 07:50
1

Ah yes that's true add it there and check again, I'll update answer – gregjer Mar 08 '13 at 07:51
1

be aware that $(document).ready uses jQuery, if you don't include that just move it to some function and call when is needed – gregjer Mar 08 '13 at 08:01

Javascript 4-image slideshow w/ arrays & setTimeout

1 Answers1