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

Screenshot of anura-lightbox



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


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.


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.


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

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


required: no, live: yes, default: -

Which download format to use for the download button


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

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


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

Whether <video>s should start playing automatically


required: no, live: on-load, default:

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



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

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


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-details slot="sidebar" override-setting="foo"></anura-details>

    <div slot="sidebar">
        my custom sidebar


<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>
<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 part="lightbox-button lightbox-button-embed-next">
        <anura-icon part="lightbox-icon lightbox-icon-embed-next"></anura-icon>
  <aside part="lightbox-aside"></aside>


Width of the sidebar, default is 30%