@redot-src/glarev1.2.1Zero dependenciesMIT
Glare is a touch-first lightbox for the web. It opens images, video, YouTube, Vimeo, maps, iframes, nodes from the page, and plain HTML, with zoom, swipe, thumbnails, and a slideshow built in.
Image galleries are the default. Everything else opens the same way: Glare detects the type from the URL, or you set type yourself.
inline · #demo-inline-source
This node sits in the page, hidden. Glare copies it into the lightbox, so forms, buttons, and event handlers you attach after opening all work.
Each card runs the call it shows. slides is the six frames from the light table.
Autoplays on open. Controls hide after two idle seconds.
Glare.open(slides, {
loop: true,
slideshow: {
autoStart: true,
speed: 2200,
},
idleTime: 2,
})The thumbnail strip is visible from the start.
Glare.open(slides, {
loop: true,
thumbs: {
autoStart: true,
},
})Slides rotate through; the dialog fades in instead of zooming.
Glare.open(slides, {
loop: true,
transitionEffect: 'circular',
animationEffect: 'fade',
})The third argument is the index to open on.
Glare.open(slides, {
loop: true,
}, 2)Blocks the context menu and dragging. Only zoom and close remain.
Glare.open(slides, {
protect: true,
buttons: ['zoom', 'close'],
})Only the close button dismisses it. Keyboard and backdrop clicks are ignored.
Glare.open(slides, {
modal: true,
})npm install @redot-src/glareimport Glare from '@redot-src/glare'
import '@redot-src/glare/style.css'
Glare.bind('[data-glare]', { loop: true })<a data-glare="gallery" href="photo.jpg" data-caption="Hello">
<img src="thumb.jpg" alt="Hello" />
</a><link rel="stylesheet" href="https://unpkg.com/@redot-src/glare/dist/glare.css" />
<script src="https://unpkg.com/@redot-src/glare/dist/glare.js"></script>
<script>
Glare.bind('[data-glare]')
</script>Continue with Getting started or the API reference.
| Key | Action |
|---|---|
| Esc | Close |
| ← → | Previous, next |
| Space | Start or stop the slideshow |
| F | Toggle fullscreen |
| Click | Zoom an image |
| Drag, pinch | Pan and zoom when zoomed in |
| Swipe | Change slide, or pull to close |