LightBox

LightBox

A set of HTML elements used to display zoomed Figure content.

Markup Example

  <div class="lightbox">
    <div class="container"></div>

    <button class="close">Close</button>
  </div>

The only required component is the Container, which holds the primary content.

Note that the close button is not required, as any keypress or mouseclick will close the LightBox when active.

LightBox Selection

When displaying a LightBox, Treesaver performs the same selection process as Chrome, choosing the first element that meets browser Requirements and size.

If no LightBox is found, the content will not be zoomed.

Sizing

You must specify minWidth and minHeight on your Figure in order to get proper sizing and selection of content within a LightBox. See Figure documentation for details.

Ignoring Links

A Figure will frequently include hyperlinks for non-Treesaver browsers that link to a larger version of the image. If you add target=lightbox to a link within a Figure, the click will not cause the browser to navigate and will instead open the LightBox.