Lightbox – An excellent image viewer control

In one of the projects, I have to show a slide show of the image. I searched this on my old and reliable friend Google and as I was expecting (I am being Luck), the first link was of Lightbox 2. As I looked at the control, I was really impressed by it. The thing which really caught my attention it’s very neat and simple way of integrating within HTML pages. Who could have thought other than Lokesh Dhakar such a neat use of REF attribute?

Don’t believe me, just check it out:
http://www.lokeshdhakar.com/projects/lightbox2/

When integrating this into one of the professional site, I found two issues. First issue is that it displays the slide images in full resolution. Though this works fine for most of the small images, but with abundance of 7-8 Mega Pixels digital cameras, now most of the users upload images more than 1024×768 resolutions (the common screen resolution of most of the web-users). So we needed an option to constraint the photo within browser window region (without scrollbars).

The second issue, which is a bit serious, is that if the slideshow target image doesn’t exists (believe me it’s more common than you can think), then it keep displaying the loading animation.

Fortunately, the fixes were very simple and even done more easily due to the existing generic routines. For the first fix, I just added some extra checks in the changeImage function to limit the picture frame within window visible region (only when the image can’t easily fit in). For the second issue, I just added event handler for the “onerror”and “onabort” events for similar to the existing onload event but in that case I displayed an image which I was very sure existed on the site.

That’ all, the site now has a very neat image slide show, all in JavaScript and with proper error handlers.

Tags: image, JavaScript, Lightbox, Lightbox 2, viewere

This entry was posted on Sunday, November 25th, 2007 at 8:02 pm and is filed under JavaScript, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.