ajax-powered gallery with no server-side programming
This is just a demo, so excuse the rawness of it.
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
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
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
Hmm not very practical at this stage but a good look at the technology.
Pingback: This Cow Is Purple
“..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.
True doesn’t work at all in IE. Works very well in Firefox! Had no idea you can get picture dimensions this way. Thanks.
Pingback: Scott » Blog Archive » AJAX gallery using no server-side
Pingback: Design Shrine | AJAX SCRIPT RESOURCES