A friend recently asked me to produce a photo album of his recent wedding. I thought ‘why not just use Picassa Web Album?’.
Well I was already hosting his web site, and he actually suggested me hosting his album too. Simply by adding a obfuscated URL path to his current website address and then providing a few HTML pages with the thumbnails of his pictures, I could quite easily achieve that.
First thing I had to do is upload smaller versions of the photos, and I did this using Adobe Photoshop, using the Automated Batch facility to resize the files to 20% of their original size.
I then set out to produce the HTML & CSS, which was basically some very simple headers, a dark background and a special ‘Thumbnail’ DIV to hold each image, all floated left to ensure they all aligned next to each other.
Now I’ve seen this particular technique before on quite a few web pages and especially other galleries, sometimes used by professional photographers. The technique is to click on a thumbnail and overlay the thumbnail with a larger pop-up of the image. This is all achieved using HTML, CSS and JavaScript. I’m not a JavaScript guru, but there is quite a simple process to get this going. Try this bit of kit at LightBox2!
