LightBox, ThickBox, GreyBox
A neat way of displaying images, image galleries, or websites with a JavaScript overlay window.
A couple months ago I found a cool script called LighBox that lets you click on an image thumbnail and see the actual image on the same page in an overlay window with the background page faded out. It worked for galleries as well because the JavaScript window has previous and next links that take you to previous or next pictures. Yeah, it’s nothing new but I implemented it in many of my freelance projects so I wanted to take a second and write about the possible options of using this type of functionality. There are a couple options, and the pros and cons vary with your precise usage. Here are the details:
GreyBox - is a pop-up window that can be used to display websites, images, and other content in a beautiful way. It does not conflict with pop-up blockers, it’s only 22kb, and really easy to set up, use, and customize.
ThickBox - is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
ThickerBox - is a modification of ThickBox.
LightBox JS - is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
If you have flash content on the page then you might run into overlay problems where flash is still over the javascript window. The fix for this involves making the flash transparent or hidden. For a more in depth explanation check here or here.
Popularity: 38%
If you enjoyed this post, please consider to leave a comment.
Comments
Lytebox
is another popular version derived from the original Lightbox. It’s fast, small and beautiful and displays images, galleries, slideshows and html documents. It can also be used from iframes.
Just take a look at http://www.dolem.com/lytebox/
Thanks goofy, I did check out Lightview recently and it looks awesome, love the fact that it uses Prototype and Scriptaculous
I started from ThickBox:
http://www.featurepics.com/Thickbox/Image-Gallery.aspx
And I think I will stay with it. Complicity of jQuery library is hidden. You just need to do routine job adding extra properties to your images.