aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Randomly displaying images from a directory with JavaScript? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Randomly displaying images from a directory with JavaScript?" Watch "Randomly displaying images from a directory with JavaScript?" New topic
Author

Randomly displaying images from a directory with JavaScript?

Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
I was wondering if there was a way to display random images from a directory using JavaScript. I know that there are a lot of scripts that can be used to display random images from an array of preset images (ex. a random image from the array containing image1.jpg, image2.jpg, image3.jpg) however this is not a viable solution for me as I have a large amount of images with drastically different file names that need to be preserved. So is there a method that finds and randomly selects a file from a specific directory, and then displays that image, regardless of the image's file name?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
JavaScript can not read a directory's content so it would have to rely on a server side component.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

This would be easy to accomplish via Ajax. Your script can make periodic calls back to the server for the next file to display. It'd be a simple matter to write a servlet (or php script) to examine the folder and randomly choose a file.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Would this be possible using a java applet? I'm not entirely sure this would be a good solution because of the bandwidth issues that I suspect might arise from using many instances of an applet on a single page. But maybe coding a very small applet which will parse a folder on the hosting server and add any files with a .jpg .png etc. extension to an array? I'm going to take a crack at coding this, but does anyone happen to know if the file class supports web storage? Ex.


Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

How is the applet going to access the server file system? And, are you comfortable asking users to run a signed applet -- scares most users away.

What's wring with the much simpler Ajax solution?
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
I wasn't aware I would need to sign my applet to access something on a local server, although I know that you need to sign it to have access to the users system.
In regards to Ajax, I've just never had any experience using anything like that. If its easy to learn then I'd be happy to take the time though. I'll google it now. Just though it might be easier if I used something I had some experience with. I also am not sure about my host's limitations, so I don't want to be disappointed if I code something entirely new and they don't support it

Thanks for the help so far

Edit: I was just thinking of something along the lines of this:

http://www.realapplets.com/tutorial/ImageExample.html

only slightly more advanced
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6


and have that jsp/servlet return the image.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

Eric Pascarello wrote:

and have that jsp/servlet return the image.

Eric


Do not use a JSP for this! That way lies heartache and pain. If you are going to use this approach, then be sure to use a servlet.

P.S. I was under the impression that you needed to update the random image periodically without page refresh -- is that the case? If not. then Eric's approach is the most straight-forward.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

Lance Walker wrote:I wasn't aware I would need to sign my applet to access something on a local server


"local server" is an oxymoron. What do you mean by that?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
My Java is bad....but isn't it as simple as


Some reason I know web request, but you would use something else to read it from the file system.


Spit the file out in the response:


Again I barely know Java so take my advice with that knowledge! lol!

Eric


Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
double post
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Bear Bibeault wrote:
Lance Walker wrote:I wasn't aware I would need to sign my applet to access something on a local server


"local server" is an oxymoron. What do you mean by that?

Hmm, silly me. I mean the server that the applet is hosted on. Must be past my bedtime .

Also, I don't need the images to refresh at all. What I'm trying to do it to display a preview of images through a bunch of thumbnails, but its not necessary for them to reload without a refresh. I just don't want to display 200+ images at a time, so I want to randomly select them from a directory. However, this needs to be a very flexible solution because the file names of the images must be preserved, and there are a large amount of them.

Also, I just hammered out this applet. I'm going to test it, but it seems like lots of you guys don't recommend using an applet, so I'm still open to suggestions. I'm assuming that all files in the directory are pictures, and it loads parameters of the directory and subdirectory of where the pictures are located. Again, I have no idea if this works, but its a good example of what I want to do.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

If there's no reloading, what's wrong with Eric's simple solution? You seem hell-bent on complicating this unnecessarily with an applet.

You do realize that applets run on the client, right?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Well you can use Ajax and return back a list of file names



You loop through it and set the source. Create a interval with JavaScript, make an Ajax call and get the next list. Using a library like JQuery makes it easy.

Most people on the net avoid applets like the plague.

Eric
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Bear Bibeault wrote:If there's no reloading, what's wrong with Eric's simple solution? You seem hell-bent on complicating this unnecessarily with an applet.

You do realize that applets run on the client, right?


Yeah I do, which is why it doesn't seem like an appropriate solution/wouldn't work. I'm going to give Erics idea a shot and I'll report back, hopefully, with news of my success. Thanks for your help and patience guys
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18140
    
    8

I can tell you right now that your applet is going to look on the client for those files (that's what a File object means) and not on the server. And if you test it by running it via a browser on the same machine where the server is running, you're going to hide that error until you try deploying it.

You're going to need something on the server which returns a list of image files from a directory, since nothing has direct access to a directory on the server over the web. Not Javascript, not applets either.

By the way your home-grown URL-encoding method (changing space to %20) should be replaced to a call to a standard URL encoding routine. Both Javascript and Java have one.
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Paul Clapham wrote:I can tell you right now that your applet is going to look on the client for those files (that's what a File object means) and not on the server. And if you test it by running it via a browser on the same machine where the server is running, you're going to hide that error until you try deploying it.

You're going to need something on the server which returns a list of image files from a directory, since nothing has direct access to a directory on the server over the web. Not Javascript, not applets either.

By the way your home-grown URL-encoding method (changing space to %20) should be replaced to a call to a standard URL encoding routine. Both Javascript and Java have one.


Thanks for the advice, although I think I'll just scrap the applet. Its a lot more clear that I was headed the wrong way to begin with. That being said, I have to learn a bit about ajax/jQuery. Doesn't look too hard, luckly. So basically I'm just going to need to make a server side PHP/ajax script to get a list of the files and then simply output a few random images on the client side?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

Whether you need Ajax or not depends on what you want to do. You haven't really been clear about it to date.

What exactly are you trying to achieve?
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Sorry, I'll try to be clearer here. My website has pages upon pages of "packages" of pictures that a user can download. I want to be able to provide a preview of these images, via thumbnails, so that they can easily see a sample of what they are downloading. I am trying to automate this process so I don't need to spend 100s of hours hardcoding the thumbnails into the HTML, so I'm looking for a simply solution quickly display a random selection of these thumbnails. My idea to automate this was based off of the fact that these images are already sorted into categories.

For example, www.example.com/images/todayspictures/*.jpg

So I figured I could parse the URL, or pass the names of the subdirectories as parameters and look for the thumbnails in a clone of the original file system.

Using the example above, the thumbs would be located at www.example.com/thumbs/images/todayspictures/(thumb)*.jpg

I could locate folder containing the correct thumb images, add all of the thumb images to an array, randomly select a few images, and then display them on the page.

It didn't seem like too hard of a task, but its much more involved than I initially though .

Again, thanks for all of your help and suggestions.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

No, this can actually be quite simple. It's the applet red herring that made this seem complicated.

If this is hosted as a Java web app it would be rather trivial to do in a JSP.

Otherwise, an Ajax solution, made easy with jQuery, might be the best bet. With it, you could send back to the server on page load for a list of n image names returned in JSON format that you would then use to create the image elements on the fly.
Lance Walker
Greenhorn

Joined: Mar 09, 2009
Posts: 23
Bear Bibeault wrote:No, this can actually be quite simple. It's the applet red herring that made this seem complicated.

If this is hosted as a Java web app it would be rather trivial to do in a JSP.

Otherwise, an Ajax solution, made easy with jQuery, might be the best bet. With it, you could send back to the server on page load for a list of n image names returned in JSON format that you would then use to create the image elements on the fly.


Ok, I'll probably stick to the Ajax idea. Thanks a lot for your suggestions, and especially your patience. Being new to Ajax/jQuery and being a lousy web "master" is a bad combination .

Lets hope I can whip up something. I've been reading this http://www.sitepoint.com/article/ajax-jquery/ to get a basic idea of what to do. If you have any other tutorials that might be useful to me, feel free to send them my way
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60059
    
  65

Well, there's always my book on jQuery!

Post back with any problems you have.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Randomly displaying images from a directory with JavaScript?
 
Similar Threads
What is best way to name jpg images in a web application?
Need help understanding math.random method.
create ImageIcon from bytes[], not from file
Using arrays to randomly generate images? (applet)
Random images Project.