Element Ausbreitung

Question

vHey jeder, ich habe einen Element Populator erstellt, die bestimmte Elemente nimmt, wickelt sie in HTML-Tags und hängt sie an einen Container. Problem ich habe, was mehr von der Kraft ist, wenn überhaupt, ist für jedes Bild geladen werden muss es automatisch eingegeben werden. Gibt es eine Möglichkeit, alle Bilder aus einem Ordner abzurufen und sie in ein Array zu laden?

ich habe diesen Code, wich funktioniert, aber mit manueller Eingabe: vielleicht etwas:

$(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]); 
    } 

Sie können das Skript in Aktion in diesem website i in der "galeria" Abschnitt

EDIT abgegeben wurden mit Ajax? Ich wollte PHP aus der Gleichung EDIT2: ich möchte es mit Ajax machen, und das ist jetzt der richtige Code

Answer 1

Sie können clientseitige JavaScript nicht verwenden, um einen Ordner auf einem Server zu scannen. Wenn Sie nicht wissen, welche Dateien der Ordner enthält, funktioniert AJAX alleine nicht.

Sie müssen serverseitigen Code wie PHP verwenden, um alle Dateien in dem Ordner zu finden und sie irgendwie an den Client zu liefern. Das ist der einzige Weg, den ich sehe.

könnte Dieser Ansatz funktioniert:

$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>'; 

Ich hoffe, das JavaScript-Code funktioniert wie Ihr funktioniert.