Lightbox (JavaScript): Difference between revisions

Revision as of 11:29, 10 January 2015

Latest revision as of 02:43, 7 September 2024

(27 intermediate revisions by 22 users not shown)

Line 1:

{{Short description|JavaScript library}}

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

'''Lightbox''' is a [[JavaScript]] techniquelibrary usedthat to displaydisplays images and othervideos web content similar to a [[Modal window|modal dialogs]] where the image is shown up centerby filling most of the screen, and dimming out the rest of the window[[web is dimmed outpage]].<ref name="useit">{{Cite web|url=http://www.useit.com/alertbox/application-design.html|title=10 Best Application UIs|author=Jakob Nielsen, Alertbox}}</ref>

The '''fundamental difference''' is that when a [[Modal window|modal dialogs]] is used "the main window can't be used", a Lightbox does not stop this '''fundamental functionality'''. In a Lightbox, users can simply press the "Tab" button to access links, buttons, or any other page elements; acknowledging the UI element will remain.

The termoriginal ''Lightbox''JavaScript library 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,The commonterm usageLightbox ofmay thealso term has evolvedrefer to encompassother Lightbox-stylesimilar JavaScript pluginslibraries. The andtechnique effectsgained inwidespread generalpopularity due to its simple and elegant style.

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].

== 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].

''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 ==

''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">{{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>

== References ==

{{Reflist}}

{{Commons category|Lightbox (JavaScript)}}

{{reflist}}

== External links ==

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

[[Category:JavaScript libraries]]