anura-lightbox

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

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).

parent

required: depends, live: yes, default: automatic

When initiating the lighbox outside of a slot, you need to tell it which component it belongs to (e.g. anura-gallery). The built-in one and slotted ones are detected and informed automatically.

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

nav-inline

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.

nav-click

required: no, live: yes, default: true

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

nav-keys

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: -

Which download format to use for the download button

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

--sidebar-width

Width of the sidebar, default is 30%