Multifaceted Lightbox

What is it?

A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can't interact with the rest of the screen.

Inspirations

Lightbox JS: Fullsize Image Overlays: The original...used to show images, like in a lightbox
Particletree · Lightbox Gone Wild!: Took the concept of the original but loaded non-image content into the page using AJAX
The Lightbox Effect without Lightbox: A simpler approach than the second, this is what I used as a basis for my code
amix.dk : GreyBox - a pop up window that doesn't suck: An iframe approach to creating popups on the screen

What is different about this version? and some examples.

This version has 4 different types of data that can be loaded into the lightbox:
- String: you can pass a simple string that will be loaded in the lightbox
- Image: it can pickup the url of an image and load it inline in the lightbox
- Local element: you can pass it the ID of an element on the page to be shown in the lightbox. When the lightbox is closed, the element will be hidden and added as the last element within the body
- AJAX: content can be loaded from a URL with AJAX
Aside from the image version, you can specify the width and height of the lightbox when invoking it
If the dimensions of the lightbox are bigger than the user's window, it will automatically shrink the size of the lightbox (for all except image lightbox)
The functions have all been put inside of a simple class to avoid function name clashes and encapsulate the functionality
This doesn't automatically add the lightbox functionality to links with particular text in them (i.e. rel="lightbox")