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

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”)

Check it Out

View examples and download