GLightbox Lightbox

Rasuke uses GLightbox 3 for image and inline-video overlays. Library site: biati-digital.github.io/glightbox

How it is wired

The npm package is imported by src/effects/lightbox.js (initLightbox(), called from EffectsBootstrap).
The stylesheet is imported once in src/app/layout.tsx: import "glightbox/dist/css/glightbox.min.css";. A copy of the compiled CSS also lives at public/assets/css/vendors/glightbox.min.css if you prefer a link tag.
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.

Triggers

initLightbox() selects every [data-lightbox] anchor and configures the library:

const lightbox = GLightbox({
  selector: '[data-lightbox]',
  width: 'auto',
  height: 'auto',
  touchNavigation: true,
  keyboardNavigation: true,
  loop: false,
  openEffect: reducedMotion ? 'none' : 'fade',
  closeEffect: reducedMotion ? 'none' : 'fade',
  slideEffect: reducedMotion ? 'none' : 'slide',
});

Href forms

href="#some-id" — an inline slide. GLightbox clones that element into the popup, so a native <video> plays without the Plyr player. Use this form for offline-safe video popups.
href="<media url>" — the type is inferred from the URL: local files (.mp4, .webm, .mov), YouTube, and Vimeo. These route through Plyr, which is fetched from cdn.plyr.io at open time — only use them when a CDN is acceptable.

Inline video behaviour

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

On open / slide load: 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.
Inline sizing: the fixed height / width GLightbox stamps on .gslide-media and .ginlined-content is cleared so the token-driven frame can size the media.

GLightbox supplies the focus trap, Esc handling, and touch navigation, so no extra accessibility plumbing is needed.

Usage

<a class="project-details-1__media" data-lightbox href="#reel-1">
  <img src="/assets/imgs/project-1/img-1.webp" alt="Studio reel" width="1200" height="800" />
</a>

<div id="reel-1" hidden>
  <video src="/assets/video/reel.mp4" controls playsinline></video>
</div>

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.
Do not style the overlay with hardcoded values — change the layout.lightbox tokens.