Lightbox (JavaScript)
Lightbox is a JavaScript technique used to display large images using modal dialogs. The effect has gained widespread popularity due to its simple yet elegant style and easy implementation. Some of the first implementations did not use any libraries, many now use a number of JavaScript libraries (such as the Prototype Javascript Framework[1] and script.aculo.us[2] for its animations and positioning), in order to reduce the size of the code.[3] The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as the later Thickbox (no longer maintained)[4] and lighter Slimbox.[3]
Functionality
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 <a> element wrapped around the <img> 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.
Lightbox permits users to view larger versions of images without having to leave the current page,[5] 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.
While Lightbox is dependent upon a browser's compatibility with Prototype to function,[2] Lightbox is triggered through a standard link tag. These 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.[5] Even so, some compatibility problems have been identified with versions of Lightbox, in particular when displaying larger images on Firefox or Opera.[6]
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 third-party developers not making lightbox function correctly in these browsers.[citation needed]
References
- ^ Herrington, Jack D. "Ajax and XML: Ajax for lightboxes". IBM DeveloperWorks. Retrieved 2008-05-21.
- ^ a b Schmitt, Christopher (2006). CSS Cookbook. O'Reilly. pp. p. 204. ISBN 0-596-52741-1.
{{cite book}}:|pages=has extra text (help) Cite error: The named reference "Schmitt" was defined multiple times with different content (see the help page). - ^ a b Resig, John (2006). Pro JavaScript Techniques. Apress. ISBN 1-59059-727-3.
- ^ http://jquery.com/demo/thickbox/
- ^ a b Zervaas, Quentin (2007). Practical Web 2.0 Applications with PHP. Springer. pp. p. 423. ISBN 1-59059-906-3.
{{cite book}}:|pages=has extra text (help) - ^ Campbell, Debbie (February 15, 2007). "Thickbox – For Image Display and Slideshows". WebProNews. Retrieved 2008-05-21.
External links
