Load list of image from folder

I have a folder of images, from 10 to 200, a webpage, a jquery fade and a php script that read folder full of images

Is there any way to make the php script scan a folder, get a list of image (in an array ?) and pass it to jquery script ? (first question)

Now, i can make a xml file from the result php list of files found or make a html <li> from the list in the html. is there ANY other way to do that ? (question #2)

From stackoverflow

• You can't just pass images as "data" into a JavaScript for display, at least not in a reasonable manner.

  nickf : i think he'd just be wanting the paths to the images.

  Deniz Dogan : I see... That was anything but clear in the question.

  marc-andre menard : some people seem to understand the question !

• the glob function will scan a folder and return an array:

  $jpgs = glob("*.jpg");
  

  you can then pass it back to jQuery by using JSON:

  echo json_encode($jpgs);
  

  it'd then just be a case of looping through the result, generating the necessary HTML.

  Alister Bulman : There are far superior, and safer ways to get the directory list (like http://php.net/manual/en/class.directoryiterator.php#88459), but yes., get the list, and output it to the HTML for Jquery to process and build a gallery.

  alex : I added an answer that's sort of a follow up to yours, hope you don't mind Nick.

  marc-andre menard : Why "There are far superior, and safer ways to get the directory list". Some people seem to think glob is fine, please compare both to make me choose wisely !

• To generate the list items you could use something like this (assuming images is the result of json_encode()):

  var images = {'image1':'images/image1.jpg','image2':'images/image2.jpg'}
  
  jQuery('#imagelist').empty();
  jQuery.each(images, function() {
    jQuery('#imagelist').append('<li>'+this+'</li>');
  });
  

  And make sure you have an unordered/ordered list in the HTML source:

  <ul id="imagelist">
    <li>No images found</li>
  </ul>
  

• To continue on from nickf's excellent answer, this is slightly more robust for images of different types.

   $imagesDir = 'path/to/your/images/';
   $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
  
   echo json_encode($images);
  

  There are other ways of doing this, but this is the easiest. Note some file systems are case sensitive, so ensure the extension list is matching precisely what you're after.

• I will give a try here with answer from many

  Alex and Nick :

  <?php
    $imagesDir = 'path/to/your/images/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    echo json_encode($images);
  ?>
  

  and from mattoc (modify) to get used for the supersized

  jQuery('#imagelist').empty();
  jQuery.each(images, function() {
    jQuery('#imagelist').append('<img src="'+this+'"/>');
  });
  

  and hope to get something like that at the end !

  <div id="supersize">
      <img  src="images/001.jpg"/>
      <img  src="images/002.jpg"/>
      <img  src="images/003.jpg"/>
  </div>
  

  for the final piece of code, i will have to find a solution to send image to supersize plugin "one by one" with preloading without problem with bug list of images

  Let supposed i get 150 images list... it will be a problem, so letting the plugin just know there is 2 images, preload the next and "ajax" change the next image

  image001.jpg is display
  ... preload image002.jpg
  display image002.jpg
  ... preload image003.jpg
  on and on and on....
  

  all this dynamicly until the end of the array !