Light Table
A portfolio gallery made as an edit table: slides in their mounts on opal glass lit from below, the chosen one lifted off it and shown whole in a viewer with its title, place, year and exposure, transport keys and a counter, series keys, and a switch for the table's light.
What it is for
The work section of a photographer's, studio's or illustrator's site.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Lit opal table, Slide mounts that lift, Viewer figure with caption, Transport keys and counter, Arrow keys through frames, Series radio tray, Table light toggle, Drawn greyscale demo frames, Own frames by src, Container query layout, Concentric radii, Finish following
- Stack
- Vanilla ES modules, CSS, SVG
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe viewer with the first frame, its caption and the counter at 01 / 09; the desk with All work chosen, the table light on (its lamp lit) and nine slides in three columns, the first lifted off the glass. Nothing runs.
- Slide chosenIt lifts 5px and turns a degree, its shadow lengthens; the viewer's picture fades in over 200 ms with its caption; the counter updates; ltb-open fires with { index, id }.
- SteppingPrevious and Next, or Left and Right anywhere but the series radios, step through the frames on the table and wrap; Home and End go to the ends; on the table focus follows the slide.
- Series chosenIts key stands raised in the tray; the table narrows to that series and the counter counts it; ltb-series fires.
- Light offThe switch goes down, its lamp goes dark, the glass becomes a plain recess and the pictures dim; ltb-light fires with { on: false }.
- Your own framesframes: [{ title, series, place, year, exposure, src, alt }] puts real photographs in the mounts and the viewer.
- TabletUnder 900px the viewer sits above the desk.
- PhoneUnder 520px the series keys fill a row and the switch its own, slide titles take two lines, the contrast key fills the width; no sideways scroll.
- Reduced motionThe picture swaps at once; slides do not lift or fade.
- FinishesOn a page with the kit's finish tokens it is drawn from them, in any of the twelve, the table always the brightest surface; otherwise aluminium or graphite by data-finish, tone or system.
Notes
Where Portfolio Iris opens each photograph behind shutter blades, one at a time, this is the edit table: every frame in view at once on lit glass, and one in the hand. Choose a slide and it lifts; its picture fills the viewer beside the table, with what it is, where, when and how it was shot. Transport keys and the arrow keys step through, series keys narrow the table to one body of work, and a switch turns the table's light off and on. The demo's nine pictures are drawn in greys as SVG; give it your own frames by src and alt. Buttons with aria-current, native radios, a toggle, a figure with its caption, a polite counter. CSS, SVG and a little DOM, no dependency, every finish of the kit.
Original composition. The photographer (Ines Varga), the titles, places, years and exposures are sample copy, and the nine pictures are drawn here in SVG for the demo; the preview says so. The plates, mounts, glass and lamp are CSS in the kit's tokens; no image file. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.
Anatomy
Lit opal table, Slide mounts that lift, Viewer figure with caption, Transport keys and counter, Arrow keys through frames, Series radio tray, Table light toggle, Drawn greyscale demo frames, Own frames by src, Container query layout, Concentric radii, Finish following
Usage notes
The work section of a photographer's, studio's or illustrator's site. Where Portfolio Iris opens each photograph behind shutter blades, one at a time, this is the edit table: every frame in view at once on lit glass, and one in the hand. Choose a slide and it lifts; its picture fills the viewer beside the table, with what it is, where, when and how it was shot. Transport keys and the arrow keys step through, series keys narrow the table to one body of work, and a switch turns the table's light off and on. The demo's nine pictures are drawn in greys as SVG; give it your own frames by src and alt. Buttons with aria-current, native radios, a toggle, a figure with its caption, a polite counter. CSS, SVG and a little DOM, no dependency, every finish of the kit.
Options
| Option | Type | Description |
|---|---|---|
| name | text | Printed small above the heading. |
| title | text | Heading |
| lead | text | Lead |
| series | enum | Series at start |
| start | number | Among all the frames; if it is not in the series, the series’ first. |
| light | boolean | The switch on the desk turns it off and on; fires ltb-light. |
| cta | text | Empty leaves it out. |
| ctaHref | text | Contrast key link |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. |
Methods
- show
- next
- prev
- update
- destroy
How it works
Original composition. The photographer (Ines Varga), the titles, places, years and exposures are sample copy, and the nine pictures are drawn here in SVG for the demo; the preview says so. The plates, mounts, glass and lamp are CSS in the kit's tokens; no image file.