2017-06-05 4 views
0

まず最初に私はこれで新しく、ここで私が学んだすべての人々に感謝します。私は自分のPHPスクリプトで見つけた画像を表示するためにjavascriptを定義することができます

私の問題: "test"というフォルダに画像をアップロードする設定が2通りあります。 ピクチャをフォルダから取り出す自動スライドショーにピクチャを表示したい。 (IMAGの1.JPG、2.JPG、3.JPGフォルダTESTである。)

私のPHPコード:PHPコードと

<?php 
$dir_path = "test/"; 
$extensions_array = array('jpg','png','jpeg'); 
$phpArray = array(); 

$dateien=scandir($dir_path); 
$anzahl=count($dateien); 

    //echo "Anzahl $anzahl"; 


if(is_dir($dir_path)) 
{ 
$files = scandir($dir_path); 

for($i = 0; $i < count($files); $i++) 
{ 
if($files[$i] !='.' && $files[$i] !='..') 
    { 
     $file = pathinfo($files[$i]); 
     $extension = $file['extension']; 

     while(in_array($extension, $extensions_array)) 
     { 
     // show image 

     echo "<img src='$dir_path$files[$i]' style='width:500px;height:500px;'><br>"; 
      $phpArray []= array($dir_path, $files[$i]); 
      $filename[]= array($files[$i]); 
      //echo $i; 
      $i++; 
     //echo "Anzahl $anzahl"; 

       if ($i>$anzahl) 
        {break;} 
      } 
    } 
} 
} 
$dir_path2 = "uplaods/"; 
$dateien2=scandir($dir_path); 
$anzahl2=count($dateien2); 

if ($anzahl2>$anzahl) 

?> 

私は、フォルダのパスとファイル名を取得し、I seperatly画像を表示するが、スライドショーではありませんでした:

MY HTML/JavaScriptコードは

<!DOCTYPE html> 
<html> 
<title>automatic slideshow</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<style> 
.mySlides {display:none;} 
</style> 
<body> 

<h2 class="w3-center">Automatic Slideshow</h2> 

<div class="w3-content w3-section" style="max-width:500px"> 
<img class="mySlides" src="1.jpg" style="width:100%" > 
<img class="mySlides" src="2.jpg" style="width:100%"> 
<img class="mySlides" src="3.jpg"style="width:100%"> 
</div> 


<script> 

var myIndex = 0; 
carousel(); 

function carousel() { 
var i; 
var x = document.getElementsByClassName("mySlides");/HERE I NEED HELP 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
myIndex++; 
if (myIndex > x.length) {myIndex = 1}  
x[myIndex-1].style.display = "block"; 
setTimeout(carousel, 2000); // Change image every 2 seconds 
} 

</script> 

</body> 
</html> 

スライドショーコードは、私がdiv要素の中で定義された画像のために動作しますが、私は外にそれを持ってしたいですフォルダ。私はファイル名とjavascriptには、PHPからフォルダのパスを取得することができましたが、私はフォルダからピクチャを表示するようにJavaScriptを伝えることができませんでした。

でも可能ですか?

+0

を入れましたか? –

+0

確かに複数の方法がありますが、いずれかのJavaスクリプトまたはphp – CoderSam

+0

で1つのファイルです。最初のPHPの部分、含まれているjavascriptとhtmlより – Flostens

答えて

0

PHP:

<?php 
$dir_path = "test/"; 
//$dir_path2 = "uplaods/"; 
$extensions_array = array('jpg','png','jpeg'); 

if(is_dir($dir_path)) 
{ 
    $files = array_slice(scandir($dir_path), 2); 
    foreach ($files as $file) 
    { 
     $ext = pathinfo($file); 
     $ext = $ext['extension']; 

     if(in_array($ext, $extensions_array)) 
      $images[] = '<img class="mySlides" src="'. $dir_path . $file .'" style="width:500px;height:500px;">'; 
    } 
} 
?> 

HTML(PHPファイル内):あなたはW3-センターわたってるしきPHPを

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>automatic slideshow</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
\t <style> 
 
\t .mySlides {display:none;} 
 
\t </style> 
 
</head> 
 
<body> 
 

 
\t <h2 class="w3-center">Automatic Slideshow</h2> 
 
\t <div class="w3-content w3-section" style="max-width:500px"> 
 
\t <?php echo implode ("<br />", $images); ?> 
 
\t </div> 
 

 

 
\t <script> 
 
\t \t var myIndex = 0; 
 
\t \t carousel(); 
 

 
\t \t function carousel() { 
 
\t \t \t var i; 
 
\t \t \t var x = document.getElementsByClassName("mySlides"); //HERE I NEED HELP 
 
\t \t \t for (i = 0; i < x.length; i++) { 
 
\t \t \t \t x[i].style.display = "none"; 
 
\t \t \t } 
 
\t \t \t myIndex++; 
 
\t \t \t if (myIndex > x.length) {myIndex = 1} 
 
\t \t \t x[myIndex-1].style.display = "block"; 
 
\t \t \t setTimeout(carousel, 2000); // Change image every 2 seconds 
 
\t \t } 
 
\t </script> 
 
</body> 
 
</html>

+0

ありがとう!!!!! 新しいファイルがフォルダにアップロードされているかどうかを確認する方法はありますか? – Flostens

+0

@Flostensは、ページをリロードするたびに、エクステンション 'jpg'、 'png'、 'jpeg'を含むすべてのイメージファイルを追加します。 – indianiso1

0

これについてはいくつかの方法がありますが、サーバー側のJavaScriptを使用している場合を除き、JavaScriptはファイルシステム上のディレクトリにあるファイルを反復処理できません。 1つの選択肢は、PHPスクリプトがJavaScript配列に画像のURI(相対または絶対)を出力させることです。もう1つの選択肢は、URIを利用してイメージオブジェクトを作成するHTMLヘッドにPHPスクリプト出力JavaScriptを持たせることです(これはイメージをプリロードするのに適しています)。より複雑な解決策は、PHPスクリプトがAJAX GETリクエストでJavaScriptから取得できるイメージURIのJSON配列を返すことです。

関連する問題