1

昨日、スタックオーバーフローでライトボックスが修正されたスライドショーについて質問を受けましたが、今は別の問題に遭遇しました.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']Web サイトのルート ディレクトリを取得するために使用します。ここでは/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 に答える