ajax-powered gallery with no server-side programming

This is just a demo, so excuse the rawness of it.

A client-side generated gallery. Probably does not work in IE, as IE does not have the XMLHTTPRequest object built into its JavaScript by default. I could adapt the code to make it work in IE, but I won’t.

Beware – bloody large! For broadband users only.

So – what’s special about it? Check the source.

This piece of code does not have any information about the images at all in the source, except for the location of them – i/. The script reads the directory of images, grabs the images, and displays thumbnails of them.

There are two innovative parts here:

  • The gallery grabs the list of images using AJAX. No server-side processing is involved – just plain old Apache directory indexing.
  • The gallery figures out the dimensions og the images, then displays thumbnails of them.

I won’t bother explaining how the AJAX works. If you read my blog at all, then you’re probably familiar with it.

The thumbnail generation, though. I haven’t seen it done before, so this may be the first time it has been done.

To display the thumbnail, the script must first grab the original image, then read the image information, then resize it.

Of course, you cannot expect the images to load immediately, even on a broadband connection, so the script checks the status of the images every second or so, to see how the download is getting on.

Each image is attached to the <body> with visibility:hidden and position:absolute;left:-2000px;top:-2000px to keep it out of the way. That way the server actually loads the image, but does not display it. As it’s attached, the image id is added to an array of images that are not finished yet.

When the images are all attached, a setTimeout is run so that every second or so, a function checks the status of the images, and builds the thumbnails, removing finished images from the incomplete array. If any images are left in the array, the function is scheduled again.

To build a thumbnail, the script grabs the offsetHeight and offsetWidth of the image, divides them by each other to get an aspect ratio, rescales the image to fit into a 100×100 block, and attaches it visibly to the document.

To use this with your own images, simply create an i/ directory, and place these files in the directory above it, then load up the gallery.html.

8 Comments.

  1. Hmm not very practical at this stage but a good look at the technology.

  2. This Cow Is Purple - pingback on November 29, 2006 at 8:11 pm
  3. “..Probably does not work in IE..”
    Yup doesn’t work at all in IE. Works perfect in Firefox. Had no idea you can get image width like that. Thanks.

  4. True doesn’t work at all in IE. Works very well in Firefox! Had no idea you can get picture dimensions this way. Thanks.

  5. Scott » Blog Archive » AJAX gallery using no server-side - pingback on March 10, 2007 at 4:59 am
  6. Design Shrine | AJAX SCRIPT RESOURCES - pingback on March 13, 2008 at 5:28 pm

Trackbacks and Pingbacks:

%d bloggers like this: