Lightbox

from Wikipedia, the free encyclopedia

It was suggested to rename this category to Category: Lightbox (JavaScript) .

In this case, the articles in the category should only be recategorized after the end of the discussion in the WikiProject Categories . Please do not empty this category before the end of the discussion and leave this message for that long.

Create discussion section

Example of a lightbox

A lightbox (after the English word for light table ) is a special form , especially in web design , for presenting photos , other images, videos and other multimedia content . If the user clicks on a preview image, the page is darkened and the large-format image is displayed floating above it. Often it is also possible to scroll between the images on a page.

history

The first lightbox was programmed by Lokesh Dhakar, who shortly thereafter published the script under a free Creative Commons license . The script quickly became popular and followed suit.

Today there is a great variety of different implementations of a lightbox with varying functionality and configuration options. Some of these are stand- alone scripts, some as plug-ins for JavaScript libraries such as jQuery . Most content management systems also offer a lightbox either directly integrated or as an extension.

function

A lightbox is usually programmed as dynamic HTML in JavaScript . A click on the preview image is intercepted and two new elements are inserted: A semi-transparent background that is placed over the page and darkens it, and the image or video itself in large format over it. Additional elements can also be added, such as a caption or navigation elements. In terms of shape, the lightbox corresponds to a modal dialogue . If the user clicks on the background or an explicit button, the large-format image and the semi-transparent background are removed again, so that the original view is restored.

Often the preview process is already in the HTML source code with the large-format image link , the Lightbox then provides a progressive improvement . For the accessibility more demands on Lightbox scripts are provided, the many aspects of the charging behavior of images to use on mobile devices affect .

Instead of using JavaScript, a lightbox can also be implemented with CSS alone.

distribution

The lightbox has become an established form of image presentation on the Internet. In addition to the presentation of images, the lightbox is also used for texts and videos. The lightbox is a user-friendly and efficient alternative to conventional pop-ups .

An alternative form of presenting images is the carousel .

Individual evidence

  1. ↑ Lightbox JS by Lokesh Dhakar. Retrieved January 19, 2015
  2. ↑ Jens Grochtdreis: Lightboxes - the new popup? Published on December 13, 2006 on Webkrauts, accessed January 19, 2015
  3. ↑ Dmitry Semenov: Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js). Released May 2nd. 2013 in Smashing Magazine , accessed January 19, 2015
  4. ↑ Jesse Couch: Responsive CSS3 Lightbox with No Javascript. November 1, 2013, accessed February 13, 2017 .
  5. ^ Matt Cronin: Modal Windows In Modern Web Design. Released May 27th. 2009 in Smashing Magazine , accessed January 19, 2015
  6. ↑ Emily Dowdle: 3 Reasons Lightbox Popups Capture More Emails. Published October 2, 2014 on OptinMonster.com, accessed January 19, 2015

Web links