CODEWITHSUNDEEP
phpjavascriptjquery
menardmam
menardmam

Reputation: 9986

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)

Upvotes: 3

Views: 23854

Answers (5)

alex
alex

Reputation: 490213

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.

Upvotes: 12

menardmam
menardmam

Reputation: 9986

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 !

Upvotes: 0

mattoc
mattoc

Reputation: 712

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>

Upvotes: 1

nickf
nickf

Reputation: 546035

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.

Upvotes: 6

Deniz Dogan
Deniz Dogan

Reputation: 26227

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

Upvotes: 0

Related Questions