anura-lightbox

Full-screen component to view bigger previews and asset metadata.

Screenshot of anura-lightbox

Attributes

asset

required: depends, live: yes, default: set by a main view

Which asset (ID) to display in the lightbox. Opens the lightbox should it be closed . When using it in a slot, the parent component will inject this at runtime (most likely when the user clicks on an asset in the main view).

adapter

required: depends, live: yes, default: automatic

Needed when using the lighbox without a connected main view (gallery/table/etc.). Referenced or auto-generated lightboxes will get it set by their main view.

sιdebar

required: no, live: no, default: true

Disables the built-in sidebar meant for viewing metadata. Possible values:

  • hidden - hides the sidebar initially, but users can still toggle it via the button in the toolbar.
  • false - removes both the sidebar and the toggle button from the toolbar.

buttons

required: no, live: yes, default: sidebar, close

Which buttons to show in the toolbar, and in which order. Known buttons:

  • close - closes the lightbox. Usually specified at the very end.
  • sidebar - sidebar toggle. Only applicable when not removed via sidebar.
  • fullscreen - request the main part of the lightbox to become fullscreen.
  • prev - go to the previous asset
  • next - go to the next asset
  • slideshow - starts a slideshow (automatically advance to the next asset every sklideshow-millis)
  • basket - add the asset to the download basket (see anura-basket)
  • download - downloads the asset in the defined quick-download format
  • share - share link, adds the current (stateful) URL to the clipboard

required: no, live: no, default: true

Disable the inline navigation buttons (floating over the image) by passing false. Consider adding prev and next to buttons if you do so.

required: no, live: yes, default: true

Disable the click navigation on the image (clicking to the right triggers "next", on the left "previous")

required: no, live: yes, default: true

Disable keyboard navigation when lightbox is open. Mapped keys:

  • esc, q - close the lightbox
  • left arrow, h - go to the previous asset
  • right arrow, l - go to the next asset
  • s - toggle the sidebar

quick-download

required: no, live: yes, default: selection dialog

Which download format to use for the download button. The chosen format must be available on all assets.

If none is specified, the DAM will be queried. If only one format is available, the download will start immediately - otherwise a selection dialog is shown:

Screenshot of the selection dialog

slideshow-millis

required: no, live: on-start, default: 5000

How many milliseconds to wait in the slideshow until advancing to the next asset

autoplay

required: no, live: on-change, arguments: none, default: not present

Whether <video>s should start playing automatically

title

required: no, live: on-load, default: asset.name

Overrides the title of the lightbox - string interpolation is supported.

Slots

buttons

required: no, default: -

Add you own buttons to the action menu. Buttons found within are given the assets ID as a value for convenience, e.g.:

<anura-lightbox>
    <span slot="buttons">
        <button onclick="alert('Asset '+this.value)" title="Demo">
            <anura-icon icon="alert-triangle"></anura-icon>
        </button>
    </span>
</anura-lightbox>

sιdebar

required: no, default: anura-details

Content of the sidebar (when enabled). When displaying an asset in the lightbox, every child node of of the sidebar is informed about the change via the asset Attribute.

<anura-lightbox>
    <anura-details slot="sidebar" override-setting="foo"></anura-details>
</anura-lightbox>

<anura-lightbox>
    <div slot="sidebar">
        my custom sidebar
    </div>
</anura-lightbox>

Parts

<nav part="lightbox-nav">
  <span part="lightbox-title" id="lightbox-title">Title</span>
  <slot name="buttons" id="button-slot"></slot>
  <!-- snip, lots of <button>s like: -->
  <button part="lightbox-button lightbox-button-close">
    <anura-icon part="lightbox-icon lightbox-icon-close"></anura-icon>
  </button>
</nav>
<div part="lightbox-container">
  <main part="lightbox-main">
    <div part="embed-container"></div>
    <nav part="embed-nav">
      <button part="lightbox-button lightbox-button-embed-prev">
        <anura-icon part="lightbox-icon lightbox-icon-embed-prev"></anura-icon>
      </button>
      <button part="lightbox-button lightbox-button-embed-next">
        <anura-icon part="lightbox-icon lightbox-icon-embed-next"></anura-icon>
      </button>
    </nav>
  </main>
  <aside part="lightbox-aside"></aside>
</div>

Variables

Width of the sidebar, default is 30%