Lightbox (JavaScript)

From Wikipedia, the free encyclopedia
Jump to: navigation, search
A typical lightbox image display

Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out.[1] Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar.[2] However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.

Background[edit]

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[3] and script.aculo.us,[4] for its animations and positioning. In April 2012, the plugin was rewritten for jQuery.[5] The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as Colorbox, Magnific Popup, Slimbox or Thickbox.

For the 2014 New York Fashion Week, the Tory Burch brand was the first to use Google’s Lightbox, which is Google’s custom brand exchange, to livestream video of the runway show.[6]

Functionality[edit]

Lightbox scripts are dependent upon a browser's JavaScript compatibility,[4] 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.[7]

References[edit]

  1. ^ Jakob Nielsen, Alertbox. "10 Best Application UIs". 
  2. ^ Dhakar, Lokesh. "Lightbox JS". Retrieved 2012-12-17. 
  3. ^ Herrington, Jack D. "Ajax and XML: Ajax for lightboxes". IBM DeveloperWorks. Retrieved 2008-05-21. 
  4. ^ a b Schmitt, Christopher (2006). CSS Cookbook. O'Reilly. p. 204. ISBN 0-596-52741-1. 
  5. ^ Dhakar, Lokesh. "Lightbox2". Retrieved 2012-12-17. 
  6. ^ Brown, Rachel (11 February 2014). "Tory Burch Linking With Google's Lightbox for NYFW". WWD. Retrieved 11 February 2014. 
  7. ^ Zervaas, Quentin (2007). Practical Web 2.0 Applications with PHP. Springer. p. 423. ISBN 1-59059-906-3.