window.open multiple setintervals images loops

Question

I'm having 3 issues with my Intervals.

One is my internal only show two pictures, and Ι am trying to show 4. I attempted to duplicate my function and change the <img /> into the doc.write(didn't work) .

Last, how do I create a loop out of those intervals (showing 1,2,3,4) nostop. It needs to be displaying all image into window.open. (Any advice: Is it better to create an Array of <img /> ?)

<script type="text/javascript" >
    var OpenWindow = window.open("http://vrjournal.com/adtech-new-york-showcases-virtual-realitys-move-into-mobile-advertising","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");

    Update1();
    function Update1() {
        OpenWindow.document.write("<IMG float:'center' SRC='Oculus.jpg'>");
        setInterval("Update2();",3000);
    }

    function Update2() {
        OpenWindow.document.write("<IMG float:'center' SRC='future-vr.jpg'>");
        setInterval("Update1();",3000);
    }
</script>

Answer 1

If the window you are opening is on the same domain as the page your code is in, then you can create an array of image URLs and advance an index into the URL on each timer.

<script type="text/javascript" >
    var OpenWindow = window.open("http://vrjournal.com/adtech-new-york-showcases-virtual-realitys-move-into-mobile-advertising","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");

    var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'img3.jpg', 'img4.jpg'];
    var imgIndex = 0;

    var timer = setInterval(function() {
        if (imgIndex >= imgURLS.length) {
            // done with the array of images, stop the timer
            clearInterval(timer);
        } else {
            OpenWindow.document.write('<img src ="' + imgURLS[imgIndex++] +  '">');
        }
    }, 3000);

</script>

If the window you opened is in a different domain than the page your code is in, then because of same-origin security protections, the browser will not let you modify the other window.

Answer 2

Here is what i'm trying to do generate an infinite loop for those images.

<script type="text/javascript" >
        var OpenWindow = window.open("","","top=100, left=400,resizable=yes,height=550,width=550,menubar=yes,location=yes,resizable=yes,scrollbars=yes");

        var imgURLS = ['Oculus.jpg', 'future-vr.jpg', 'morpheus.jpg', 'samsungvr.jpg'];
        var imgIndex = {
      for (var i = 0; i < imgURLS.length; i++) { 
        for (var j = 0; j < imgURLS.length; j++)
    };

        var timer = setInterval(function() {
            if (imgIndex > imgURLS.length) {
                clearInterval(timer);
            } else {
                OpenWindow.document.write('<img src ="' + imgURLS[imgIndex++] +  '">');
            }
        }, 3000);

        </script>