Easy Image Lightbox With CSS Animations – Lumos

Lumos is a simple lightweight image lightbox library for displaying images in a lightbox with smooth CSS animations and custom captions.

How to use it:

1. Import the Lumos library’s files into the HTML page.

<link rel="stylesheet" href="src/lumos.css" />
<script src="src/lumos.js"></script>

2. Add the Lumos template to the page.

<template id="lumos-template">
  <div id="lumos-container">
    <figure id="lumos-figure">
      <img src="" alt="" id="lumos-image">
      <!-- Optional: only if you want to use data-lumos-caption -->
      <figcaption id="lumos-caption"></figcaption> 
    </figure>
  </div>
</template>

3. Add the data-action="lumos" attribute to your image and determine the path to the image to be displayed in the lightbox.

<img src="small.jpg" alt="Image Alt"
     data-action="lumos"
     data-lumos-src="full.jpg"
/>

4. To display a description at the bottom of the image lightbox, simply define your caption in the data-lumos-caption attribute as follows:

<img src="small.jpg" alt="Image Alt"
     data-action="lumos"
     data-lumos-src="full.jpg"
     data-lumos-caption="Description Here"
/>

5. Customize the image lightbox by overriding the default CSS variables.

:root {
  --lumos-background: rgba(.8, .8, .8, .7);
  --lumos-padding: 2rem;
  --lumos-child-margin-top: 1rem;
  --lumos-transition-duration: 250ms;
}