The image overlay effect

On ChristopherWardPhotography.com, when you click on an image, it pops up the image in a floating panel above the other images. I think this is pretty cool. I have done something similar in code that I had written to tarken the screen, put up a “glass pane” (you can’t click on links), and place content in an overlayed div. This library works really slick though.

I first started with lightbox. It is pretty popular, and quite a few people use it, although I don’t think it is over used. This works pretty well. It has a few dependancies, such as prototype, and scriptaculous. These libraries on there own add quite a bit of functionality to javascript, but they aren’t lightweight.

Then I found lytebox. This project shrinks down the code by “borrowing” just what is needed for the lightbox effect. Then he has improved it. The images will automatilcy resize to fit the browser screen, and it will also allow html documents in these pop ups, not just images. This is what I went with.

I kind of wish that lightbox had the same image scaling and html content that lytebox has, because I have some more plans for some sriptaculous scripting…