Lightbox_me is an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.
Features:
Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not:
- Handles overlay resize when the window is resized
- Handles overlay size in cases where the document is smaller than the window
- Handles position: fixed in all browsers
- Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents
In addition it’s got these other nice features:
- Tiny footprint (just over 1000 bytes gzipped & compressed)
- Small DOM overhead (adds 1 DOM element for the overlay)
- Dynamic iFrame shim is created and destroyed for the IE 6 select box peek issue (tested and working on https pages)
- Supports IE 6+, Firefox 2.5+, Safari, Chrome (haven’t tested in Opera yet)
The plugin options like defining:
- the effect used while appearing
- the speed of the overlaying process
- lightbox being closed with the escape button and/or when clicked on the overlay
- CSS class names and styles
Usage:
Include jQuery and lightbox_me in your web page, then invoke lightbox_me on a jQuery object:
$(domobj).lightbox_me();
or $("#id").lightbox_me();
This will lightbox the DOM element immediately. Typically you would put this code inside the click handler of another element.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://buckwilson.me/lightboxme/