Load list of image from folder

Question

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)

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

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 !