What is it?

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.

Download

Current version: v2.3

Contribute on GitHub

Created by Buck Wilson for Jive Software.

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 7+, Firefox 2.5+, Safari, Chrome (haven't tested in Opera yet)

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.

Demonstration

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!

Triggering a close

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');
						

Triggering a reposition

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');
						

Options

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.

Can I see some ID?

Please sign in using the form below

Feeling left out?

Don't be sad, just click here to sign up! close