Enhanced Image Viewing

I don't know if anyone has noticed how I updated my blog so I'm going to spell it out. I spent a little time a couple weeks ago enhancing the way images are displayed in my blogger layout tempate. Try clicking on one of the images. You'll see that the page no longer navigates away from the blog to the image. Instead a HTML <div> object is made visible and brought to the front of the viewing area and the larger image is loaded and displayed. This concept is referred to by some as a "lightbox."

Once the lightbox has been displayed, you can navigate between all the pictures on the site by clicking on the right or left side of the picture to move forward or backward respectively. You can close the lightbox either by clicking the close label at the bottom border or by scrolling down the page and clicking somewhere else.

I didn't do all the programming for the lightbox I just wired it up. There is a lot of javascript code that was written by others being used. The main lightbox library came from: http://www.huddletogether.com. Blogger doesn't allow you to upload scripts that they will host so I had to post them on my own site. It is common curtousy to not link images and scripts from others sites.

The little work I did do was to write some code to iterate over all the pictures and attach the lightbox functionality to them. If I didn't do this, then I'd have to add a special attribute by hand to all the images as I upload them. By doing it dynamically when the page is loaded I don't have to remember to do it when putting together a post. I'm also grabbing the blog-entry title and placing it on the lightbox to give the picture a description.

Here's an example of what it looks like: