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.