JS Array Not Passing through Function

This site is best viewed in a modern browser with JavaScript enabled.

JNerd

I am coding a site for a friend who wants an image slideshow on her homepage. I've written a function that requests an array and that should pull in the images at timed intervals. Here is a snippet of the default.js code.

var nImg = 0;

function slideShow(arr)
{
	// This changes the image
	var fullPath = document.getElementById('img').src;
	var lastnum = fullPath.lastIndexOf("/") + 1;
	var parentFolder = fullPath.slice(0, lastnum);
	var newImg = parentFolder + arr[nImg];
	document.getElementById('img').src = newImg;

// This tests to see if it should loop back to the first image
if (nImg == arr.length - 1)
{ nImg = 0; }
else
{ nImg = nImg + 1; }

var reset = setTimeout("slideShow(" + arr + ")", 6000);
}

Here is the snippet from the homepage that should call the function:

<script type="text/javascript" runat="server">
	var arrHome = new Array("dress1.jpg", "dress2.jpg", "dress3.jpg", "dress4.jpg", "dress5.jpg", "dress6.jpg", "dress7.jpg");
	slideShow(arrHome);
</script>

However, the array will not pass through the function. If I create an array within default.js, it works fine. The problem lies with trying to pass in an array from the HTML. Granted, I could just work in the JS and not worry about the HTML. However, there are two problems:

Once I've finished coding this site, I want my friend to manage it herself. I do NOT want her touching the JS.
I would like to be able to use this script on several pages, using different arrays.

An alternate solution I've thought of is using JS to browse the contents of a directory and use any and all images located in that folder. I know I did this with PHP once; is there a similar code in JS?

Any help you could give me would be greatly appreciated.

rnd_me

var reset = setTimeout(function(){slideShow( arr )}, 6000);

JNerd

Such a simple solution! Thanks so very much!

mrhoo

If your source file paths are identical except for the number, and they are sequential, just replace the image number with the next.

function slideShow(min, max){
    var fullpath= document.getElementById('img').src, newImg;

if(typeof min== 'number'){
    slideshow.min= min;
    slideshow.max= max;
    slideshow.count= min-1;
}
if(++slideshow.count> slideshow.max) slideshow.count= slideshow.min;
newImg= fullpath.replace(/\d+\.jpg/, slideshow.count+'.jpg';
document.getElementById('img').src= newImg;
slideshow.reset= setTimeout(slideShow, 6000);
}
window.onload= function(){
    slideShow(1, 7);
}

You would only need to handle an array if they were not named as sequential strings, or had different paths.

function slideShow(arr){
    var fullpath= document.getElementById('img').src, newImg;
    fullpath= fullpath.substring(0, fullpath.lastIndexOf('/')+1);  

    // if they are in the same folder -otherwise, pass and set the whole path from the array
    if(arr.constructor== Array){
        slideshow.pics= arr;
        slideshow.count= -1;
    }
    if(++slideshow.count== slideshow.pics.length) slideshow.count= 0;
    newImg= fullpath+slideshow.pics[slideshow.count];
    document.getElementById('img').src= newImg;
    slideshow.reset= setTimeout(slideShow, 6000);
}
window.onload= function(){
    slideShow(["aline.jpg", "mini.jpg", "maxi.jpg", "sheath.jpg", "sari.jpg", "wedding.jpg", "lilblack.jpg"]);

//It's good to be able to pause and restart a slideshow:

document.getElementById('img').onclick= function(){
    if(slideshow.reset){
        clearTimeout(slideshow.reset);
        delete slideshow.reset;
    }
    else slideShow();
}
}