Lightbox (JavaScript): Difference between revisions

Revision as of 19:06, 11 October 2008

Latest revision as of 02:43, 7 September 2024

(146 intermediate revisions by more than 100 users not shown)

Line 1:

{{Short description|JavaScript library}}

{{Infobox Software

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

| name = Lightbox

| screenshot = [[Image:lightbox2.png|225px]]

| caption = A webpage showing a Lightbox 2 window.

| developer = Lokesh Dhakar

| latest release version = 2.04

| latest release date = {{release date|2008|03|09}}

| operating system = [[Cross-platform]]

| language = [[English language|English]]

| status = [[Software release cycle#Stable.2Funstable|Stable]]

| license = [[Creative Commons|Creative Commons Attribution 2.5 License]]

| website = http://www.lokeshdhakar.com/projects/lightbox2/

}}

'''Lightbox''', and the newer '''Lightbox 2''', is a [[JavaScript]] application used to display large images using [[Modal window|modal dialogs]]. The script has gained widespread popularity due to its simple yet elegant style and easy implementation. While it was initially developed from scratch, Lightbox has since been modified to 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 = 0596527411 | 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 = 1590597273 }}</ref> The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as the later Thickbox.<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>

== How it works ==

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; tag wrapped around the &lt;img&gt; tag. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.

'''Lightbox''',The andoriginal the newer '''Lightbox 2''', is a [[JavaScript]] applicationlibrary used to display large images using [[Modal window|modal dialogs]]. The script has gained widespread popularity due to its simple yet elegant style and easy implementation. While it was initially developed from scratch, Lightbox has since been modified to use a number oftwo 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 = 05965274110-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 = 1590597273 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 Popup, Slimbox or Thickbox.<ref name="Resig" />

== Functionality ==

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

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 = 1590599063 | 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 highlight the image being viewed.

While Lightbox is dependent upon a browser's compatibility with Prototype to function,<ref name="Schmitt">{{cite book | last = Schmitt | first = Christopher | year = 2006 | title = CSS Cookbook | publisher = [[O'Reilly]] | isbn = 0596527411 | pages = p. 207 }}</ref> Lightbox is triggered through a standard link tag. Thus browsers that do not support JavaScript simply load the image as a separate file, 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 web | last = Campbell | first = Debbie | date = [[February 15]], [[2007]] | title = Thickbox - For Image Display and Slideshows | work = WebProNews | url = http://www.webpronews.com/blogtalk/2007/02/15/thickbox-for-image-display-and-slideshows | accessdate = 2008-05-21 }}</ref>

== References ==

{{reflistReflist}}

== External links ==

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

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

* [http://www.hotajax.org/others/lightbox/14-lightbox/572-2-of-lightbox-clone.html 27 of lightbox clone]

[[Category:JavaScript programming languagelibraries]]

* [http://fortysomething.ca/mt/etc/archives/005400.php Which Lightbox is right for you?]

* [http://mjijackson.com/shadowbox/ Shadowbox Media Viewer] A “cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript”. It can be used to extend the Prototype+ Scriptaculous, as well as [[Yahoo! UI Library|YUI]], [[Ext (javascript library)|Ext]], [[jQuery]] and [[MooTools]] frameworks.

* [http://www.synapsesinc.com/lightbox Synapses Lightbox] A PHP Based lightbox solution that uses one image, and one image directory for your lightbox gallery. As opposed to having a thumbnail image for previewing, Synapses Lightbox auto resizes proportionately on the fly with the use of the PHP GD technology.

* [http://www.codefidelity.com/blog/?page_id=7 Lightbox++] further development of Lightbox to use Flash in the Lightbox

* [http://www.starsystems.ch/picViewer.html picture viewer] add on for Lightbox to use High Resolution Pictures on the Web (to 2880 pixels)

* [http://www.digitalia.be/software/slimbox Slimbox] A lightweight alternative based on the [[MooTools]] framework.

* [http://planetozh.com/projects/lightbox-clones/ The Lightbox Clones Matrix] A matrix comparison of '''40+ lightbox alternatives''', based on various Javascript frameworks ([[jQuery]], [[MooTools]], Prototype...)

* [http://www.hellogoogle.com/efecto_ajax_lightbox_javascript_css/ Ajax Lightbox version (spanish)]

[[Category:JavaScript programming language]]

[[Category:Web design]]

[[Category:Web development]]

[[Category:Web 2.0]]

[[Category:Ajax (programming)|Category:Ajax]]