FaceBox: Facebook-Style JavaScript Overlays

Monday, March 31st, 2008

FaceBox DialogLightbox-type DIV overlays have a multitude of uses. If you’re building a web app, or if you are just looking for a way to declutter your blog, you can just sweep elements under the proverbial rug until they’re needed, and then call them back in a “almost-window.”

FaceBox, is yet another way of implementing this functionality, but styled in a similar manner to FaceBook’s pop-up boxes.

FaceBox can display DIVs, images, AJAX-loaded pages, or you can just write content in dynamically via JavaScript. It’s fairly easy to implement the script, though it took me a little bit of tweaking to get all of the images to display correctly (I just had to change a few paths throughout the code).

The JavaScript file is just 6KB, and the 1KB worth of CSS can easily be pasted into your existing stylesheet, or referenced separately. There are also a few assorted images that are required, though they’re mainly under 1K. Also note that FaceBox requires jQuery to function, so you may not want it if you’re a Prototype aficionado.

Which Lightbox is Right For You?

Thursday, December 20th, 2007

I was going to write a post comparing different lightbox scripts, but it looks like “etc” beat me to it. Which Lightbox is right for you? covers 18+ different scripts for your lightboxing needs.

For those of you who have never heard of the term “lightbox,” it’s a photographic term that has been recycled for web use. A lightbox, in the photographic sense, is a device used for viewing negatives. In the web design area, “lightbox” refers to a script that displays images or other content in an overlay DIV.

Which Lightbox is right for you? This post will help you figure that out.


Close
E-mail It