Lightbox

About

Links that share a data-lightbox gallery name open one viewer. It is named "Image viewer", takes focus on its close button, keeps the rest of the page inert and returns focus to the link when it closes. The arrow keys move between images, Escape and the backdrop close it, the counter is announced as it changes, and slides are skipped when the user prefers reduced motion.

Each link's href is the full-size image, so without JavaScript the links still open the images.

Usage

Register the component and the framework loads it the first time a page contains [data-lightbox].

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-lightbox]', () => import('@parallelogram-js/core/components/Lightbox'));
app.run();

The framework is optional. Lightbox.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Lightbox from '@parallelogram-js/core/components/Lightbox';

Lightbox.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/lightbox.css';