Propagation d'éléments

Question

vPour tout le monde, j'ai créé un populeur d'éléments, qui prend certains éléments, les enveloppe dans des balises html et les ajoute à un conteneur. Problème que j'ai, qui est plus de la nuissance si quelque chose, est que pour chaque image à charger, il doit être entré automatiquement. Existe-t-il un moyen de récupérer toutes les images d'un dossier et de les charger dans un tableau?

j'ai ce code, les travaux Wich, mais avec saisie manuelle:

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

Vous pouvez voir le script en action dans ce website je l'ai fait dans la section "Galeria"

EDIT: peut-être quelque chose avec ajax? Je voulais garder PHP hors de l'équation EDIT2: je voudrais le faire avec ajax, et c'est maintenant le code correct

Answer 1

Vous ne pouvez pas utiliser le JavaScript côté client pour analyser un dossier sur un serveur. Si vous ne savez pas quels fichiers le dossier contient, alors AJAX seul ne fonctionne même pas.

Vous devez utiliser un code côté serveur, tel que PHP, pour trouver tous les fichiers dans le dossier, et les remettre en quelque sorte au client. C'est la seule façon que je vois.

Cette approche pourrait fonctionner:

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

J'espère que cela fonctionne comme votre code JavaScript fait.