Lightbox (JavaScript): Difference between revisions

Revision as of 14:49, 16 May 2008

Latest revision as of 02:43, 7 September 2024

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

Line 1:

{{Short description|JavaScript library}}

<!-- Please do not remove or change this AfD message until the issue is settled -->

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

<!-- The nomination page for this article already existed when this tag was added. If this was because the article had been nominated for deletion before, and you wish to renominate it, please replace "page=Lightbox (JavaScript)" with "page=Lightbox (JavaScript) (2nd nomination)" below before proceeding with the nomination.

-->{{AfDM|page=Lightbox (JavaScript)|date=2008 May 16|substed=yes}}

<!-- For administrator use only: {{oldafdfull|page=Lightbox (JavaScript)|date=16 May 2008|result='''keep'''}} -->

<!-- End of AfD message, feel free to edit beyond this point -->

{{Infobox Software

| 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 = March 9, 2008

| 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/ 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. 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://lokeshdhakar.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://www.nickstakenburg.com/projects/lightview/ Lightview] Handles images, slideshows, videos, flash, iframes, Ajax and inline content.

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://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.

== References ==

* [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.

{{Reflist}}

* [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 30+ lightbox alternatives, based on various Javascript frameworks ([[jQuery]], [[MooTools]], Prototype...)

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