javascript - random images from a folder - Stack Overflow

admin管理员组

文章数量:1399499

I am trying to rewrite my code below to search a folder for all the images (they will be numbered but there maybe gaps, ie not 1.jpg,2.jpg,3.jpg but instead 1.jpg,15.jpg,60.jpg for this reason i would like to search the folder, put all the images into an array and then pick one randomly each time its looped.

Any help would be greatly appreciated.

Firstly i am currently specifying image total above the main script below:

imgWidth = 160,
imgHeight = 95,
imgTotal = 22,
total = 0,
tiles;


//create the HTML for the tiles and append that to the bg element
 function makeTiles(count){
     var html = '', imgNum;
     while(count--){
  imgNum = Math.floor(Math.random()*imgTotal + 1);
  html += "<div class='tile' style='background:url(public/images/portfolio/all/"+imgNum+".jpg) 0 0 no-repeat;' ><img style='opacity:0; filter:alpha(opacity=0);' src='public/images/portfolio/all/"+imgNum+"-c.jpg' alt='' /></div>\r";
     }
     $bg.append(html);
 }

I am trying to rewrite my code below to search a folder for all the images (they will be numbered but there maybe gaps, ie not 1.jpg,2.jpg,3.jpg but instead 1.jpg,15.jpg,60.jpg for this reason i would like to search the folder, put all the images into an array and then pick one randomly each time its looped.

Any help would be greatly appreciated.

Firstly i am currently specifying image total above the main script below:

imgWidth = 160,
imgHeight = 95,
imgTotal = 22,
total = 0,
tiles;


//create the HTML for the tiles and append that to the bg element
 function makeTiles(count){
     var html = '', imgNum;
     while(count--){
  imgNum = Math.floor(Math.random()*imgTotal + 1);
  html += "<div class='tile' style='background:url(public/images/portfolio/all/"+imgNum+".jpg) 0 0 no-repeat;' ><img style='opacity:0; filter:alpha(opacity=0);' src='public/images/portfolio/all/"+imgNum+"-c.jpg' alt='' /></div>\r";
     }
     $bg.append(html);
 }

• javascript
• jquery

Share Improve this question Follow asked Nov 27, 2009 at 10:42 AndyAndy 3,02199 gold badges4545 silver badges6363 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

You'll need to create a list of available images with something else than javascript, since it has no filesystem access, even though in the end, you are accessing the images via their url.

Workaround: enable some directory listing for the images, then access this page via javascript, parse the image files and construct an array out of them; but frankly, there are shorter and more robust ways to acplish this ...

pseudocode ..

$ ls -1 *jpg > imagesfilelist.txt
$ cp imagefilelist.txt /some/publicly/accessible/folder

js/jquery ..

$.get("/some/publicly/accessible/folder/imagefilelist.txt", function(data){
   alert("My image files: " + data);
});

...

javascript can not access local folders. point.

I repeat: there is no way you can "search folder" to get "array of images" in JS. You could do that part (server only!) in PHP or such server-side language and return results via AJAX.

To do what you want you need to know what the images are called. JavaScript cannot access folder directly as mented above. You would need to use a server side script to provide an array of the images for the JS to pick at random to do this.

Javascript will not be able to browse folders. What you need to do is to create an array of available images and then select a random one. You could do this using any server side technology (php, rails, java, ...).

The way you're trying to do it is a wrong one.But iwth a bit of tricks it could work though, but it's very wrong way to do this kind of things.

You can generate file list with php and feed it to your script. You can even create php script which will generate your script already populated with needed data but it's not the best to do this too.

So, the best ways are: - create html with list of filenames/images(visible or invisible) by php, then manipulate it by javascript; - create html and javascript wich will do AJAX query to php script which will return filename list(formated as JSON if you wish).

Why not upload your images to a free hosting site (like Flickr) grab the feed from your image group and select the random image from there?

本文标签： javascriptrandom images from a folderStack Overflow