GLightbox Lightbox

Rasuke uses GLightbox 3 (the only runtime dependency besides GSAP and Three.js) for image and inline-video overlays. Library site: biati-digital.github.io/glightbox

How it is wired

• The npm package is imported by src/assets/js/lightbox.js (initLightbox(), called from main.js); its stylesheet is the classic file assets/css/vendors/glightbox.min.css, linked in src/layouts/base.njk. In the classic ThemeForest package GLightbox also ships as assets/js/vendors/glightbox.min.js.
• Overlay geometry comes from tokens — layout.lightbox → --layout-lightbox-*: overlay opacity 0.82, media max min(68rem, 92vw) × 80vh, radius 20px, frame padding {space.2}, glow opacity 0.28, 48px close button.

Inline video behaviour

lightbox.js adds two behaviours on top of the stock library:

• On open: every muted <video> inside the active slide is explicitly played (playsInline set first) — browsers block unmuted autoplay, and lightbox clones need an explicit .play().
• On close / slide change: lightbox videos are paused and rewound, so the next open starts clean instead of mid-frame.

Usage

Use GLightbox's standard markup on the trigger (class / data-gallery grouping as configured by the initializer) and point it at the full-size image or video. Keep a normal <a href> / poster fallback in the markup so the media is still reachable with JavaScript off.

Do not

• Do not add a second lightbox library (Magnific Popup etc. are not part of Rasuke).
• Do not style the overlay with hardcoded values — change the layout.lightbox tokens.