Need help with creating a slideshow

[Chelsea7]

I'm trying to create an automated slide show of images from a directory. The php side works fine that it reads all images in a directory and places them in an array. But how do I get javascript to list them one at a time on a page? I think it has something to do with the syntax below the second to last line of this code;

<img id="slideshow" src="824312204.jpg" />

Its just selecting this file. What do I have to do to make it read the files in the directory without me typing the files names in the code. The wildcards don't work as in

<img id="slideshow" src="*.*" />

Here's the rest of the javascript code;


<script src="getimages.php"></script>

<script type="text/javascript">


var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "upload/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="824312204.jpg" />
</div>

Any assistance will be appreciated.

 

[BillyRayPreachersSon]

What do I have to do to make it read the files in the directory without me typing the files names in the code.

You've already told us that the PHP script is doing this, so perhaps you mean that you want to cycle through the filenames in the array, rather than get JS to try and read the contents of a directory on the server, to which it has no access?

That being the case, your script already does that - follow this logic through:

1. On page load, rotateImages is set to be called every 2.5 seconds.
2. When rotateImages is called, it sets the SRC attribute of the element with an ID of 'slideshow' (assumed to be an image element) to be the 'next' item in the array.
3. Increment the 'next' counter, and cycle back to the start if all images have been shown.
4. Wait 2.5 seconds and go to step 2.

So, perhaps one or more of the following are wrong:

- You have other code that is overriding the 'onload' event, thus your slideshow never starts.
- You have more then one image on the page with an ID of 'slideshow' and so the script doesn't know which one to update.
- You have no elements on the page with an ID of 'slideshow' so there is nothing to update.
- You have a single element on the page with an ID of 'slideshow', but it's not an image.
- Your array has only 1 filename in it (have you tried viewing the src of "getimages.php" to see what it contains? - this would have been useful to post to prove that your PHP was working)
- Everything is as expected, yet you have a JS error you haven't mentioned.

On another note, you should really add 'type="text/javascript"' to your PHP script element. While most browsers assume JS by default, it never hurts.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

Chelsea7,

Did you get your slideshow working in the end?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Chelsea7]

Yes. Thank you. I revised the whole code.