要素の伝播

Question

vHey誰もが、特定の要素を取り、htmlタグでラップし、それらをコンテナに追加する要素の作成者を作成しました。問題は、私が持っている、何かがあれば、それは自動的に入力する必要があります読み込まれるすべての画像のためのものです。フォルダからすべての画像を取得して配列にロードする方法はありますか？

私はこのコード、ウィッヒ作品を持っていますが、手動入力で：多分何か：

$(window).on('load', function() { 

    var gallery = document.getElementById("grid"); 
    var images = [ 
     "./imgs/galeria/0.jpg", 
     "./imgs/galeria/1.jpg", 
     "./imgs/galeria/2.jpg", 
     "./imgs/galeria/3.jpg", 
     "./imgs/galeria/4.jpg", 
     "./imgs/galeria/7.jpg", 
     "./imgs/galeria/6.jpg", 
     "./imgs/galeria/5.jpg", 
     "./imgs/galeria/8.jpg", 
     "./imgs/galeria/9.jpg", 
     "./imgs/galeria/10.jpg", 
     "./imgs/galeria/11.jpg", 
     "./imgs/galeria/12.jpg", 
     "./imgs/galeria/13.jpg", 
     "./imgs/galeria/14.jpg", 
     "./imgs/galeria/15.jpg", 
     "./imgs/galeria/16.jpg", 
     "./imgs/galeria/17.jpg", 
     "./imgs/galeria/18.jpg", 
     "./imgs/galeria/19.jpg", 
     "./imgs/galeria/20.jpg" 
    ]; 

    for (var i = 0; i < images.length; i++) { 

     var thumbnailWrapper = document.createElement("div"); 

     thumbnailWrapper.className = "thumbnail-wrapper"; 

     var thumbnail = document.createElement("div"); 

     thumbnail.className = "thumbnail"; 

     thumbnail.dataset.source = "./imgs/galeria/" + i + ".jpg"; 

     thumbnailWrapper.appendChild(thumbnail); 

     gallery.appendChild(thumbnailWrapper); 
    } 

    var thumb = document.getElementsByClassName('thumbnail'); 
    // console.log(thumb); 

    for (j = 0; j < images.length; j++) { 
     // $(thumb[j]).attr('src', images[j]); 
     $(thumb[j]).css('background-image', 'url(./imgs/galeria/thumbs/' + j + 'tbm.jpg)'); 
     // console.log(j); 
     // console.log(images[j]); 
    } 

は、私が「ガレリア」で作られたこのwebsite

EDITでアクションのスクリプトを見ることができますアヤックス？私は方程式のPHPを維持したかった EDIT2：私はajaxでそれを作ってみたいですが、これは正しいコードになりました

Answer 1

サーバ上のフォルダをスキャンするのにクライアント側のJavaScriptを使うことはできません。フォルダに含まれるファイルがわからない場合は、AJAXだけでは機能しません。

PHPなどのサーバー側のコードを使用してフォルダ内のすべてのファイルを探し、何らかの形でクライアントに配信する必要があります。それが私が見る唯一の方法です。

このアプローチは、仕事ができる：

$images = glob('imgs/galeria/*.jpg'); 

echo '<div id="grid">'; 

foreach ($images as $key => $image) { 
    echo '<div class="thumbnail-wrapper">'; 
    echo '<div 
    class="thumbnail" 
    data-source="' . $image . '" 
    style="background-image: url(imgs/galeria/thumbs/' . $key . 'tbm.jpg)" 
    ></div>'; 
    echo '</div>'; 
} 

echo '</div>'; 

私はあなたのJavaScriptコードがないように、この作品を願っています。