Lightbox (JavaScript): Difference between revisions

Revision as of 01:35, 17 August 2019

Latest revision as of 02:43, 7 September 2024

(10 intermediate revisions by 8 users not shown)

Line 1:

{{Short description|JavaScript library}}

[[File: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>

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.

The original Lightbox library 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 Colorbox, Magnific Popup, Slimbox or Thickbox.

Lightbox scripts are dependent upon a browser's [[JavaScript]] support,.<ref name="Schmitt2">{{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> 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>

<gallery mode="packed-overlay" caption="[[File:The Lightbox JavaScript in action.png]]">

File:The Lightbox JavaScript in action.png

File:Lightbox mockup.jpg

</gallery>

]]

<gallery>

Example.jpg|Caption1

Example.jpg|Caption2

</gallery>

== Bypassing ==

The user may use a developer tool such as Chrome's Inspect Element, to remove and add the code for it from the DOM. <ref>Nicholas Miller, [http://digiwonk.wonderhowto.com/how-to/popup-killer-bypass-website-barriers-without-signing-up-completing-surveys-0155077/ "Popup Killer: How to Bypass Website Barriers Without Signing Up or Completing Surveys"], ''WonderHowTo'', 2014</ref> Adblock Plus as an example, has the ability to block these elements using Element Hiding Helper or manually written rules. <ref>[https://adblockplus.org/elemhidehelper] "Element Hiding Helper Companion Extension for Adblock Plus"], Retrieved on 2015-09-23</ref>

Lightbox scripts are dependent upon a browser's [[JavaScript]] support,.<ref name="Schmitt2">{{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> 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>

== References ==

{{Commons category|Lightbox (JavaScript)}}

{{Reflist}}

== External links ==

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

[[Category:JavaScript libraries]]