Lightbox (JavaScript): Difference between revisions

Revision as of 13:02, 28 March 2008

Latest revision as of 02:43, 7 September 2024

(174 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.03.3

| latest release date = May 21, 2007

| 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.huddletogether.com/projects/lightbox2/ http://www.huddletogether.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. Lightbox uses the [[Prototype Javascript Framework]] and [[script.aculo.us]] for its animations and positioning.

__TOC__

== How it works ==

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

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.

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.

== External links ==

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

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.

* [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 YUI, Ext, jQuery and MooTools frameworks.

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>

* [http://www.synapsesinc.com/lightbox Synapses Lightbox] A PHP Based lightbox solution that uses one image, and one image directory for your lightbox galley. 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.

== References ==

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

{{Reflist}}

== External links ==

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

[[Category:JavaScript programming languagelibraries]]

[[Category:Web design]]

[[Category:Web development]]

[[Category:Web 2.0]]

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