Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.
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.
Lightbox_me handles all of those annoying edge cases that other lightbox solutions do not:
In addition it's got these other nice features:
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.
This is a typical use-case for a modal: a sign in sheet. Create the sign in sheet in your document, then set it to display: none;, then attach a click handler to the item you want to invoke the sign in sheet:
$('#try-1').click(function(e) {
$('#sign_up').lightbox_me({
centered: true,
onLoad: function() {
$('#sign_up').find('input:first').focus()
}
});
e.preventDefault();
});
Be sure and resize the browser height and scroll around to observe the various cases outlined above.
Try it!You can manually trigger a close event by calling .trigger('close') on the element you have lightboxed. For example:
$ele.lightbox_me();
$ele.trigger('close');
Repositioning happens on window resize or scroll, but sometimes you may need to trigger it manually. Call .trigger('reposition'); on the element you have lightboxed. For example:
$ele.lightbox_me();
$ele.trigger('reposition');
| Option | Default | Description |
|---|---|---|
| appearEffect | "fadeIn" | The appear effect jQuery is to use on the modal. |
| appearEase | "" | The easing effect jQuery is to use on the modal. (requires jQuery easing) |
| overlaySpeed | 300 | The time it takes (in ms, or "slow", "normal", "fast") for the overlay to fade in. |
| lightboxSpeed | "fast" | The time it takes (in ms, or "slow", "normal", "fast") for the lightbox modal to animate in. |
| closeSelector | ".close" | The jQuery selector (in string format) you want lightbox_me to bind the close event to. |
| closeClick | true | Whether or not to close the lightbox with the user clicks the overlay. |
| closeEsc | true | Whether or not to close the lightbox when the user presses escape |
| destroyOnClose | false | Whether or not to destroy the DOM element that has been lightboxed when the user closes it (this option is good if you're using ajax to create the DOM) |
| showOverlay | true | Whether or not to show an overlay when presenting the modal. |
| onLoad | function() {} | Function to call when the lightbox is completely open (after animation) |
| onClose | function() {} | Function to call when the lightbox is completely closed (after animation) |
| classPrefix | 'lb' | The class to prefix the overlay CSS class |
| zIndex | 999 | The base zIndex for the overlay. The iframe shim is this + 1, the modal is this + 2 |
| centered | false | Whether or not the modal is centered vertically |
| modalCSS | {top: '40px'} | CSS applied to the modal when lightbox_me is run. If you specify a "top" it will be overridden if centered is set to true |
| overlayCSS | {background: 'black', opacity: .6} |
CSS applied to the overlay when lightbox_me is run. |