Styleguide Navigation

Lightbox

  • Status unkown unkown
  • 2017-01-18 Added [jch]

Variants of Lightbox

Default

Open Template

Real Content

Small

Open Small Template

Real Content

HTML Lightbox

Inline Markup

Open Javascript Template

Open existing element (will copy html, not dom)

Open from script

Remote Content

Just link to a page that contains a lightbox (we will look for ".js-lightbox--content")

Open remote lightbox

Different link für lightbox content.

Open a Page (Default-link and lightbox-link are different)

Open a Page (small)

If we can't find any "js-lightbox--content", we'll go for the child element of #main-content and display them in the lightbox. This is a fallback scenario and may lead to potential problems. (It's also against the concept of designated lightbox pages)

Javascript Lightbox

Call with ew.ui.lightbox.show(html string / dom element / jquery element, options, title)
Returns a lightbox instance with following methods:

  • close Closes the lightbox
  • update(html string / dom element / jquery element, title) Updates the content of the lightbox
  • setLoadingState(boolean) Shows or hides a loading spinner

Lightbox with title

Alert when closed

Hello world for 2 seconds

Without close button for 2 seconds