@redot-src/glarev1.4.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,
},
})The effect between slides; it mirrors when you go back. flip is custom: a name plus a few lines of CSS.
Glare.open(slides, {
loop: true,
transitionEffect: 'circular',
})How the lightbox opens and closes. drop is custom: it lives in this site's CSS.
Glare.open(slides, {
animationEffect: 'drop',
})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'],
})shuffle is an object: { name, label, icon, click }. It looks like the built-in buttons and runs click.
const shuffle = { ... }
Glare.open(slides, {
loop: true,
buttons: ['zoom', shuffle, 'close'],
})Only the close button dismisses it. Keyboard and backdrop clicks are ignored.
Glare.open(slides, {
modal: true,
})Where the zoom starts: a position in the lightbox, or an element by selector. Here, this Open button.
Glare.open(slides, {
anchor: 'center-center',
})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 |