Randomly displaying images from a directory with JavaScript?

[Lance Walker]

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]

JavaScript can not read a directory's content so it would have to rely on a server side component.

Eric

[Bear Bibeault]

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.

[Lance Walker]

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.

String[] files;
File f = new File("www.example.com" + picture);
f.createNewFile();
String[] strs = f.listFiles();
for(String str: strs)
{
        if(str.endsWith(".jpg") || str.endsWith(".png"))
           files.add(str);
}



  

[Bear Bibeault]

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]

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]

<img id="foo"  src="foo/bar.jsp"/> 

and have that jsp/servlet return the image.

Eric

[Bear Bibeault]

Eric Pascarello wrote:

<img id="foo"  src="foo/bar.jsp"/> 

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]

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]

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.

public static byte[] GetImageBytes(string imgUrl){
    HttpWebRequest webReq = (HttpWebRequest)WebReq.Create(url);
    HttpWebResponse webResp =HttpWebResponse)webReq.GetResponse();
    return getImageBytes(System.Drawing.Image.FromStream(webResp.GetResponseStream()));
}

Spit the file out in the response:

byte[] imgBytes = GetImageBytes("https://coderanch.com/templates/default/images/moosefly.gif");

HttpServletResponse servResp = (HttpServletResponse)response;
servResp.setContentType("image/jpeg");
servResp.setContentLength(imgBytes.length);
servResp.write(imgBytes);

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

Eric

[Lance Walker]

double post

[Lance Walker]

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.

  package applet;

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.MediaTracker;
import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;

public class DownloadManager extends Applet{

	
	String category;
	String file;
	
	Image i1;
	Image i2;
	Image i3;
	Image i4;
	Image i5;
	Image i6;
	Image i7;
	Image i8;

	MediaTracker mt;
	public void init(){
	//MediaTracker to help image loading
	mt = new MediaTracker(this);
	//get Patameters
	category = getParameter("category");
	file = getParameter("file");
	//Trim whitespace
	category = category.trim();
	file = file.trim();
	//construct URL picture directory path
	File path = new File((category + "/" + file + "/").replaceAll(" ", "%20"));
	
	String[] list = path.list();
	//map images to URLs
		try {
			Image i1 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i2 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i3 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i4 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i5 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i6 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i7 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
		}
		try {
			Image i8 = getImage(new URL(path + list[(int) (Math.random() * list.length)]));
		} catch (MalformedURLException e) {
			
	}
		//Add images to media tracker
		mt.addImage(i1,1);
		mt.addImage(i2,2);
		mt.addImage(i3,3);
		mt.addImage(i4,4);
		mt.addImage(i5,5);
		mt.addImage(i6,6);
		mt.addImage(i7,7);
		mt.addImage(i8,8);
		//Allow all images to load
		try {
            mt.waitForAll();
       }
       catch (InterruptedException  e) {} 

		
	}
	
	public void paint(Graphics g){
	//Write Images	
		g.drawImage(i1, 0, 0, null);
		g.drawImage(i2, 0, 0, null);
		g.drawImage(i3, 0, 0, null);
		g.drawImage(i4, 0, 0, null);
		g.drawImage(i5, 0, 0, null);
		g.drawImage(i6, 0, 0, null);
		g.drawImage(i7, 0, 0, null);
		g.drawImage(i8, 0, 0, null);


	}
}
  

[Bear Bibeault]

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]

Well you can use Ajax and return back a list of file names

{ images : ["asdf.jog","foo.jpg","bar.jpg"] }

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]

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]

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]

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]

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]

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]

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]

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]

Well, there's always my book on jQuery!

Post back with any problems you have.