Lightbox (JavaScript): Difference between revisions

Revision as of 12:28, 3 April 2014

Latest revision as of 02:43, 7 September 2024

(38 intermediate revisions by 27 users not shown)

Line 1:

{{Short description|JavaScript library}}

[[fileFile:Lightbox mockup.jpg|thumb|A typical lightbox image display]]

'''Lightbox''' is a [[JavaScript]] library that displays images and videos by filling the screen, and dimming out the rest of the [[web page]].<ref name="useit">{{Cite web|url=http://www.useit.com/alertbox/application-design.html|title=10 Best Application UIs|author=Jakob Nielsen, Alertbox}}</ref>

'''Lightbox''' is a [[JavaScript]] technique used to display images and other web content using [[Modal window|modal dialogs]]. ''Lightbox'' was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar.<ref>{{cite web | accessdate=2012-12-17 | first=Lokesh | last=Dhakar | title=Lightbox JS | url=http://lokeshdhakar.com/projects/lightbox/}}</ref> However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.

The original JavaScript library was written by Lokesh Dhakar.<ref>{{cite web | accessdate=2012-12-17 | first=Lokesh | last=Dhakar | title=Lightbox JS | url=http://lokeshdhakar.com/projects/lightbox/}}</ref> The term Lightbox may also refer to other similar JavaScript libraries. The technique gained widespread popularity due to its simple and elegant style.

== 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]]<ref name="Herrington">{{cite web | last = Herrington | first = Jack D | date = | title = Ajax and XML: Ajax for lightboxes | work = [[IBM DeveloperWorks]] | url = http://www.ibm.com/developerworks/library/x-ajaxxml6/ | accessdate = 2008-05-21 }}</ref> and [[script.aculo.us]],<ref name="Schmitt">{{cite book | last = Schmitt | first = Christopher | year = 2006 | title = CSS Cookbook | publisher = [[O'Reilly]] | isbn = 0-596-52741-1 | pages = 204 }}</ref> for its animations and positioning. In April 2012, the plugin was rewritten for [[jQuery]].<ref>{{cite web | accessdate=2012-12-17 | first=Lokesh | last=Dhakar | title=Lightbox2 | url=http://lokeshdhakar.com/projects/lightbox2/}}</ref> The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as [http://www.jacklmoore.com/colorbox/ Colorbox], [http://dimsemenov.com/plugins/magnific-popup/ Magnific Popup], [http://www.digitalia.be/software/slimbox Slimbox] or [http://codylindley.com/thickbox/ Thickbox].

The technique gained widespread popularity due to its simple yet elegant style and easy implementation. The original Lightbox pluginlibrary used two JavaScript libraries, [[Prototype Javascript Framework]]<ref name="Herrington">{{cite web | last = Herrington | first = Jack D | date = | title = Ajax and XML: Ajax for lightboxes | work = [[IBM DeveloperWorks]] | url = http://www.ibm.com/developerworks/library/x-ajaxxml6/ | accessdate = 2008-05-21 }}</ref> and [[script.aculo.us]],<ref name="Schmitt">{{cite book | last = Schmitt | first = Christopher | year = 2006 | title = CSS Cookbook | publisher = [[O'Reilly Media|O'Reilly]] | isbn = 0-596-52741-1 | pages = 204 }}</ref> for its animations and positioning. In April 2012, the [[Plug-in (computing)|plugin]] was rewritten for [[jQuery]].<ref>{{cite web | accessdate=2012-12-17 | first=Lokesh | last=Dhakar | title=Lightbox2 | url=http://lokeshdhakar.com/projects/lightbox2/}}</ref> The open-source nature of Lightbox encouraged developers to modify and fork the code, resulting in plugins such as [http://www.jacklmoore.com/colorbox/ Colorbox], [http://dimsemenov.com/plugins/magnific-popup/ Magnific Popup], [http://www.digitalia.be/software/slimbox Slimbox] or [http://codylindley.com/thickbox/ 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.<ref name="Tory Burch Linking With Google's Lightbox for NYFW">{{cite web | url=http://www.wwd.com/fashion-news/fashion-scoops/google-girl-7437793?src=nl/mornReport/20140211 | title=Tory Burch Linking With Google's Lightbox for NYFW | publisher=WWD | date=11 February 2014 | accessdate=11 February 2014 | author=Brown, Rachel}}</ref>

''Lightbox'' scripts are dependent upon a browser's [[JavaScript]] compatibility,support.<ref name="SchmittSchmitt2">{{cite book | last = Schmitt | first = Christopher | year = 2006 | title = CSS Cookbook | publisher = [[O'Reilly Media|O'Reilly]] | isbn = 0-596-52741-1 | pages = 207 }}</ref> 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.<ref name="Zervaas">{{cite book | last = Zervaas | first = Quentin | year = 2007 | title = Practical Web 2.0 Applications with PHP | publisher = Springer | isbn = 1-59059-906-3 | pages = [https://archive.org/details/practicalweb20ap0000zerv/page/423 423] | url = https://archive.org/details/practicalweb20ap0000zerv/page/423 }}</ref>

== Functionality ==

On Lightbox-enabled links, direct links to image files (or HTML content via [[Ajax (programming)|Ajax]]) are displayed in an overlay on the current page instead of causing a new page load.<ref name="Zervaas">{{cite book | last = Zervaas | first = Quentin | year = 2007 | title = Practical Web 2.0 Applications with PHP | publisher = Springer | isbn = 1-59059-906-3 | pages = 423 }}</ref> 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 &lt;a&gt; 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,<ref name="Schmitt">{{cite book | last = Schmitt | first = Christopher | year = 2006 | title = CSS Cookbook | publisher = [[O'Reilly]] | isbn = 0-596-52741-1 | pages = 207 }}</ref> 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.<ref name="Zervaas" /

== References ==

{{Reflist}}

{{Commons category|Lightbox (JavaScript)}}

{{reflist}}

== External links ==

* {{Commons category inline|Lightbox (JavaScript)}}

[[Category:JavaScript libraries]]