php - Javascript 数组不会注意到文件夹中的新图像

Question

昨天我有一个问题是关于在 stackoverflow 上固定灯箱的幻灯片放映，但现在我遇到了另一个问题。我通过 php 创建了一个 Javascript 数组，在 JS 中我使幻灯片放映工作 + 灯箱工作。现在，当我将新图像添加到图像文件夹时，它确实将其包含在 src""属性中，但不显示图像，而是在图像不起作用时显示错误图片(无法包含图像，因为我不如果你想要问题的图像，我有足够的代表，我可以发送)

这是php代码部分:

//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

?>

这是使幻灯片放映和灯箱正常工作的 Javascript 代码。

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';
}
}

一切正常，但是当我将新图像添加到图像文件夹时它不显示它..

问候科恩。

更新，一切正常，但我们尝试动态执行，但现在 src""给我未定义的。有人看到我在哪里编码错误了吗？

php部分:

 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

Javascript 部分:

var curimg=0;

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

亲切的问候，

科恩。

Answer 1

您遇到问题的原因是您没有正确引用图像的位置。 我会找到一些链接让您在一分钟内查看。

如果你改变

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

到

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

浏览器会知道在 /slidepluslight/slideshows/minpunten/images 目录中查找图像。

---

此答案的保留适用于动态 URL 问题，因此此解决方案可用于其他应用程序。

就动态图像链接而言，在我看来，它需要在 returnimages 函数中解决。

使用$_SERVER['DOCUMENT_ROOT'] 获取网站的根目录。这是 /Applications/MAMP/htdocs，然后将其余部分指定为 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 .'";');
    ....
}