I'm a regular reader of Joel's Business of Software forum where you can get an awful lot of great tips on becoming a micro-ISV.

Recently a couple of people were talking about a javascript library that helps users to see a larger image of one that might be too small to get the details called LightBox. It's pretty neat actually, but it feels a bit like it's reloading a second page even though it isn't. It also has a slight delay due to the neccesity of downloading a second graphic, which actually could be eliminated by pre-caching the second graphic I suppose. (There's an enhancement request for you Lokesh!)

Anyway, I thought it would be fun to come up with an alternative to LightBox that involved a bit more animation and didn't feel like it pulled the user away from the page. One of the nice things about my solution is that the animation will make it obvious that the user is still on the same page, so they won't click the "back" button on the browser. In my solution you supply only the large graphic and a little client side script moves and resizes the image.

I've dubbed it "PopBox" due to the way it pops out at you in a pseudo-3D way. You can download it as well as get full instructions on how to use it on the PopBox product page.

Simplicity and ease of use were my primary concerns as I wanted those with little HTML skill to be able to use it. Thus, PopBox requires no knowledge of positioning and works just by adding a few simple attributes to your <img> tags.

Here are a few images below that show the default behavior of PopBox. More advanced moving and sizing is discussed on the product page. In browsers that support a URL for the cursor style you can use the magnifying glass images from my kit. Feel free to click on the pictures to see how they work.

Images of different sizes and shapes

Yes I know initial page downloads may take a while if you have lots and lots of big images on your page, but with the proliferation of high-speed internet that is rapidly becoming less of a problem. Regardless, that is one of the enhancements to PopBox that I am working on and hope to have solved in the near future (Note: this was solved in PopBox 2.0). In fact, there are a few enhancements I have planned, and questions and suggestions can be sent to john.reid@c6software.com with PopBox somewhere in the email subject.

One of the most difficult aspects of PopBox development was ensuring cross-browser compatibility. Without the writings of Danny Goodman I couldn't have produced something like PopBox in the time I had allotted, so if you haven't read either the Javascript & DHTML Cookbook or Dynamic HTML: The Definitive Reference then I seriously doubt you're getting all you can out of your script! (He's also got a new JavaScript Bible out in the 5th edition.)

Since PopBox is free you can support its development by supporting my advertisers or buying one of the books through these links. Think of it as getting a free copy of PopBox with every book purchase! :)

Oh - send me your URL where you use it and I may post it!