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

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

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

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>