Lightbox Web Component

Same config as the DOM-mode lightbox, but using <alap-lightbox> custom elements. Shadow DOM isolation, ::part() styling, same set navigator and image zoom.

Panel Placement

Select a compass direction to anchor the lightbox panel in the viewport.

Click a direction again to deselect. With no direction selected, the panel defaults to centered.

Bridges

Explore all bridges, or just the NYC bridges.

Links with thumbnails show image previews in the lightbox.

Coffee

Browse all coffee spots, or narrow to SF roasters or Portland roasters.

Links without thumbnails show a text-only panel.

Landmarks

See all landmarks, or by city: London, Paris, Berlin, Sydney, Seattle, Los Angeles, Tokyo, Seoul, Melbourne, Shanghai, Mumbai.

Parks

Explore all parks from Central Park to Tiergarten.

Favorites

My personal favorites across all categories.

Sci-fi

Browse all sci-fi, just the TV shows, or sci-fi games.

Games

Check out all games.

Everything

The full collection: all items — a good stress test for the set navigator.

Expressions

NYC and SF, minus coffee — same expression language, different presentation.

::part() Custom Styling

The lightbox below uses ::part() to change the panel background and button color — no extra CSS classes on the component itself.

purple-themed bridges

::part() Layout Rearrangement

Using ::part() with CSS order to move description and title above the image.

rearranged landmarks

Same Config, Menu Web Component

The links below use <alap-link> with the same registered config.

Browse bridges, coffee, or landmarks.