Lightbox (JavaScript)
Lightbox is a JavaScript technique used to display images and other web content using modal dialogs. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar.[1] However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.
Background
The technique gained widespread popularity due to its simple yet elegant style and easy implementation. The original Lightbox plugin used two JavaScript libraries, Prototype Javascript Framework[2] and script.aculo.us,[3] for its animations and positioning. In April 2012, the plugin was rewritten for jQuery.[4] The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as Colorbox, Slimbox, and Thickbox.
Functionality
On Lightbox-enabled links, direct links to image files (or HTML content via Ajax) are displayed in an overlay on the current page instead of causing a new page load.[5] While the overlay is displayed, the rest of the page content is darkened (and, in effect, temporarily disabled) to focus the user on the overlay. Depending on the plugin's settings, the overlay may be positioned, sized to the user's browser window, and animated. The plugin determines which links are enabled by means of the HTML "rel" attribute, which is used on <a> tags. Lightbox plugins also provide ways to display captions and to run slide shows, which can be navigated using the arrow keys or mouse.
Lightbox scripts are dependent upon a browser's JavaScript compatibility,[3] though the simplicity of implementations and the maturity of such scripts make this dependency mostly irrelevant. Many Lightbox scripts use unobtrusive JavaScript. Browsers that do not load the script for whatever reason can instead simply load the image as a separate page load, losing the Lightbox effect but still retaining the ability to display the image.[5]
References
- ^ Dhakar, Lokesh. "Lightbox JS". Retrieved 2012-12-17.
- ^ Herrington, Jack D. "Ajax and XML: Ajax for lightboxes". IBM DeveloperWorks. Retrieved 2008-05-21.
- ^ a b Schmitt, Christopher (2006). CSS Cookbook. O'Reilly. p. 204. ISBN 0-596-52741-1. Cite error: The named reference "Schmitt" was defined multiple times with different content (see the help page).
- ^ Dhakar, Lokesh. "Lightbox2". Retrieved 2012-12-17.
- ^ a b Zervaas, Quentin (2007). Practical Web 2.0 Applications with PHP. Springer. p. 423. ISBN 1-59059-906-3.