Lightbox (JavaScript): Difference between revisions

Revision as of 03:45, 25 July 2012

Latest revision as of 02:43, 7 September 2024

(63 intermediate revisions by 42 users not shown)

Line 1:

{{Short description|JavaScript library}}

'''Lightbox''' is a [[JavaScript]] technique used to display large images using [[Modal window|modal dialogs]]. The effect has gained widespread popularity due to its simple yet elegant style and easy implementation.

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

Some of the first implementations did not use any libraries, many now use a number of JavaScript libraries (such as the [[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 = p. 204 }}</ref> for its animations and positioning), in order to reduce the size of the code.<ref name="Resig">{{cite book | last = Resig | first = John | year = 2006 | title = Pro JavaScript Techniques | publisher = [[Apress]] | isbn = 1-59059-727-3 }}</ref> The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as the later Thickbox (no longer maintained)<ref>http://jquery.com/demo/thickbox/</ref> and lighter Slimbox.<ref name="Resig" />

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

== Functionality ==

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.

On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML "rel" attribute, which is used on an &lt;a&gt; element wrapped around the &lt;img&gt; element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.

SomeThe oforiginal theLightbox firstlibrary implementationsused didtwo not use anyJavaScript libraries, many now use a number of JavaScript libraries (such as the [[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 = p. 204 }}</ref> for its animations and positioning),. inIn orderApril to reduce2012, the size[[Plug-in of(computing)|plugin]] thewas coderewritten for [[jQuery]].<ref name="Resig">{{cite bookweb | last accessdate= Resig2012-12-17 | first = JohnLokesh | year last= 2006Dhakar | title = Pro JavaScript TechniquesLightbox2 | publisher url= [[Apress]] | isbn = 1-59059-727-3 http://lokeshdhakar.com/projects/lightbox2/}}</ref> The releaseopen-source nature of Lightbox encouraged other developers to workmodify onand similarfork projectsthe code, resulting in productsplugins such as theColorbox, laterMagnific ThickboxPopup, (noSlimbox longeror maintained)<ref>http://jqueryThickbox.com/demo/thickbox/</ref> and lighter Slimbox.<ref name="Resig" />

''Lightbox'' permits users to view larger versions of images without having to leave the current page,<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 = p. 423 }}</ref> and is also able to display simple slideshows. The use of the dark background, which dims the page over which the image has been overlaid, also serves to disable the remainder of the interface.

WhileLightbox ''Lightbox''scripts isare dependent upon a browser's compatibility with [[Prototype JavaScript Framework|Prototype]] to function,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 = p. 207 }}</ref> LightboxBrowsers isthat triggereddo throughnot aload standardthe linkscript tag.for Thuswhatever browsersreason thatcan do not support JavaScriptinstead simply load the image as a separate filepage load, losing the Lightbox effect but still retaining the ability to display the full-sized image.<ref name="Zervaas" /> Even so, some compatibility problems have been identified with versions of Lightbox, in particular when displaying larger images on [[Firefox]] or [[Opera (web browser)|Opera]].<ref name="Campbell">{{cite webbook | last = CampbellZervaas | first = Debbie Quentin | dateyear = February 15, 2007 | title = ThickboxPractical –Web For2.0 ImageApplications Displaywith andPHP Slideshows| publisher = Springer | workisbn = WebProNews1-59059-906-3 | urlpages = http[https://wwwarchive.webpronews.comorg/blogtalkdetails/2007practicalweb20ap0000zerv/02page/15/thickbox-for-image-display-and-slideshows423 423] | accessdateurl = 2008-05-21https://archive.org/details/practicalweb20ap0000zerv/page/423 }}</ref>

Many users have also noted that there is a lack of compatibility across the [[Internet Explorer]] range of browsers, and in particular, the newly released Internet Explorer 9. However, in most cases the compatibility issues can be attributed to software developers not making lightbox function correctly in these browsers.{{Citation needed|date=February 2010}}

== References ==

{{reflistReflist}}

== External links ==

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

* [http://lokeshdhakar.com/projects/lightbox2/ Official Lightbox website]

[[Category:JavaScript libraries]]

[[cs:Lightbox 2]]

[[es:Lightbox (JavaScript)]]

[[ja:Lightbox]]