# Fluidbox

Fluidbox is a lightbox for photos, video, iframes and your own content. The picture flies out of its thumbnail, follows your finger, zooms with a pinch or a double-tap, and flies back to the thumbnail it came from when it closes.

It ships as one package, `@ogdakke/fluidbox`. One runtime does the gestures, flights, zoom and the body-level viewer. Each entry point is a thin layer over it.

## Entry points

| You build with | Read | Import from |
| --- | --- | --- |
| React | [React](https://fluidbox.dwe.workers.dev/docs/react.md) | `@ogdakke/fluidbox/react` |
| Next.js | [Next.js](https://fluidbox.dwe.workers.dev/docs/nextjs.md) | `@ogdakke/fluidbox/react` |
| Vue | [Vue](https://fluidbox.dwe.workers.dev/docs/vue.md) | `@ogdakke/fluidbox/vue` |
| Solid | [Solid](https://fluidbox.dwe.workers.dev/docs/solid.md) | `@ogdakke/fluidbox/solid` |
| Angular | [Angular](https://fluidbox.dwe.workers.dev/docs/angular.md) | `@ogdakke/fluidbox/angular` |
| Plain HTML, any server template | [Custom elements](https://fluidbox.dwe.workers.dev/docs/custom-elements.md) | `@ogdakke/fluidbox/elements` |
| Plain JavaScript or TypeScript | [JavaScript](https://fluidbox.dwe.workers.dev/docs/javascript.md) | `@ogdakke/fluidbox` |

Every entry point uses the same items, the same stylesheet (`@ogdakke/fluidbox/styles.css`) and the same optional add-ons: `@ogdakke/fluidbox/filmstrip` and `@ogdakke/fluidbox/sheet`.

## Concepts

- **Item.** A plain object that reads like the element the viewer draws: `{ type: "img", src, alt, width, height }`, a `video`, an `iframe`, or `custom` content. See [Media types](https://fluidbox.dwe.workers.dev/docs/media.md).
- **Items.** The list the viewer can show: an array, or a lazy list that makes each item on demand, so it can be a thousand items with a dozen thumbnails on the page. See [Items and origins](https://fluidbox.dwe.workers.dev/docs/items-and-origins.md).
- **Trigger.** The element that opens an item. The flight starts on it, usually on the thumbnail image inside it, and lands back there on close.
- **Viewer.** One layer at the end of `<body>`. You put your own controls and captions into it.
- **The fluidbox.** What `createFluidbox()` returns: the viewer's state, the commands that open, move and close it, and the events that say what happened and why.

## Patterns

The [pattern pages](https://fluidbox.dwe.workers.dev/docs/patterns.md) show nine common setups, each live and in every framework: a [gallery](https://fluidbox.dwe.workers.dev/docs/patterns/basic.md), [one trigger for an album](https://fluidbox.dwe.workers.dev/docs/patterns/overlay.md), [rich origins](https://fluidbox.dwe.workers.dev/docs/patterns/origins.md), [custom content](https://fluidbox.dwe.workers.dev/docs/patterns/renderers.md), [programmatic control](https://fluidbox.dwe.workers.dev/docs/patterns/programmatic.md), [zoom](https://fluidbox.dwe.workers.dev/docs/patterns/zoom.md), a [filmstrip](https://fluidbox.dwe.workers.dev/docs/patterns/filmstrip.md), a [sheet](https://fluidbox.dwe.workers.dev/docs/patterns/sheet.md) and [headless controls](https://fluidbox.dwe.workers.dev/docs/patterns/headless.md).

## Next

Start with [Getting started](https://fluidbox.dwe.workers.dev/docs/getting-started.md) to install the package and build a first gallery. Then open the page for your framework, and the [API reference](https://fluidbox.dwe.workers.dev/docs/api.md) when you need the exact types.