What is it?
- 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?
- 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”)