Overlay images onto a page using LightBox2

26 09 2007

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!