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

Javascript array doesn't notice new images in folder

本文关键字：新图像 图像 数组 注意到 文件夹 Javascript      更新时间：2023-09-26

昨天我收到了一个关于幻灯片的问题，灯箱固定在堆栈溢出上，但现在我遇到了另一个问题。我通过 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;
}

各种问候，

科恩。

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

如果您更改 

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 .'";');
    ....
}
相关文章：