Javascript array doesn't notice new images in folder

Yesterday I got a question about a slideshow with lightbox fixed on stackoverflow but now I came to another problem.. I create an Javascript array trough php and in JS I make the slideshow work + lightbox work. Now when I add a new image to the images folder it does include it in the src"" attribute but does not show the image and instead shows the error picture when an image doesn't work (couldn't include an image because I don't have enough rep if you would like the image of the problem, I can send it)


This is the php code part:

//This function gets the file names of all images in the current directory
 //and ouputs them as a JavaScript array
 function returnimages($dirname   ="/Applications/MAMP/htdocs/slidepluslight/slideshows/minpunten/images/") {
 $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
 $files = array();
 $curimage=0;
 if($handle = opendir($dirname)) {
 while(false !== ($file = readdir($handle))){
 if(eregi($pattern, $file)){ //if this file is a valid image
 //Output it as a JavaScript array element
 print_r ('galleryarray['.$curimage.']="'.$file .'";');
 $curimage++;
 }
 }
 
 closedir($handle);
 }
 return($files);
 }
 
 print 'var galleryarray=new Array();'; //Define array in JavaScript
 returnimages() //Output the array elements containing the image file names
 
 ?>
 

And this is the Javascript code that makes the slideshow + lightbox work.

var curimg=0;
 
 function rotateimages(){
 document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
 curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
 }
 
 window.onload = function(){
 setInterval("rotateimages()", 500);
 }
 
 window.onload = function(){
 setInterval("rotateimages()", 2500);
 document.getElementById("slideshow").onclick = function () {
 var imageSrc = document.getElementById("slideshow").src;
 document.getElementById("lightImg").setAttribute("src", imageSrc);
 document.getElementById('lightbox').style.display = 'block';
 document.getElementById('fade').style.display = 'block';
 }
 }
 

It all runs fine but when I add a new image to the images folder it doesn't show it..


Regards Koen.

---

Answer:

The reason you were having trouble is you weren't properly refering to the location of the images. I'll find some links to have you look it in a min.

If you change

document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]); 

to

document.getElementById("slideshow").setAttribute("src", "/slidepluslight/slideshows/minpunten/images/"+galleryarray[curimg]);

the browser will know to look in the /slidepluslight/slideshows/minpunten/images directory for the images.

---

The remander of this answer applies to the dynamic URL issue so this solution could be used in other applications.

As far as making the links to the images dynamic it seems to me like it needs to be addressed in thereturnimages function.

Use $_SERVER['DOCUMENT_ROOT'] to get the root directory of website. Here that is/Applications/MAMP/htdocs and then have the rest specified as a parameter to returnimages.

function returnimages($relPath = "/slidepluslight/slideshows/minpunten/images/") {
    $dirName = $_SERVER['DOCUMENT_ROOT'] . $relPath;
    ...
    /* Where you are outputting the JS array */
    print_r ('galleryarray['.$curimage.']="'. $relPath + $file .'";');
    ....
}