Lumos
An ultra-lightweight lightbox in pure javscript with css animation.
Demo here: https://jupi007.github.io/Lumos/demo.html
Usage
Firstly include the script and the stylesheet (it is recommended to customize them, you can use the .scss and .ts file) on your HTML page:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="src/lumos.css">
...
</head>
<body>
...
<script src="src/lumos.js"></script>
</body>
Then add the lightbox template anywhere in the HTML:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<template id="lumos-template">
<div id="lumos-container">
<figure id="lumos-figure">
<img src="" alt="" id="lumos-image">
<figcaption id="lumos-caption"></figcaption> <!-- Optional if you don't want to use data-lumos-caption -->
</figure>
</div>
</template>
...
</body>
And finally active the Lumos lightbox by adding the data-action="lumos"
attribute on any image:
<img
src="image.jpg"
alt="Image alt"
data-action="lumos"
/>
You can also provide another image to display into the lightbox (a bigger one by exemple), and also a caption with the data-lumos-src
and data-lumos-caption
attributes:
<img
src="image.small.jpg"
alt="Image alt"
data-action="lumos"
data-lumos-src="image.large.jpg"
data-lumos-caption="A caption which describes the image"
/>