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.