1

昨天我有一个关于在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"" 给了我 undefined .. 有人看到我在哪里编码错了吗？

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

亲切的问候，

科恩。

4

1 回答 1

2

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

如果你改变

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 .'";');
    ....
}
于 2012-04-11T13:07:27.987 回答