Author: | Jupiter007-43 |
---|---|
Views Total: | 662 views |
Official Page: | Go to website |
Last Update: | December 5, 2020 |
License: | MIT |
Preview:

Description:
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; }