Javascript array doesn't notice new images in folder - php

Question

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.
UPDATE, everything worked but we tried to do it dynamically but now the src"" gives me undefined.. Does somebody see where I code it wrong?
The php part:
function returnimages($relPath = "/slidepluslight/slideshows/minpunten/images/") {
$dirname = $_SERVER['DOCUMENT_ROOT'] + $relPath;
$files = array();
$curimage = 0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if (preg_match('/\.(jpg|jpeg|gif|png)$/', $file)){ //if this file is a valid image
//Output it as a JavaScript array element
print_r ('galleryarray['.$curimage.']="'. $relPath + $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 the Javascript part:
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
Kinds regards,
Koen.

Answer 1

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 the returnimages 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 .'";');
....
}