# Fluidbox

> A lightbox for the web (`@ogdakke/fluidbox`): media flies out of its thumbnail, follows gestures, and lands back where it came from. Bindings for React, Vue, Solid and Angular, custom elements and a plain JavaScript API share one runtime.

Every page is also available as Markdown at the same path with `.md`. The pattern pages show the same example in every framework. `llms-full.txt` holds all pages in one file, with each pattern's code linked rather than inlined.

## Start

- [Introduction](https://fluidbox.dwe.workers.dev/docs/index.md): What fluidbox is, which entry point to use for your stack, and where to read next.
- [Getting started](https://fluidbox.dwe.workers.dev/docs/getting-started.md): How to install fluidbox, import its styles, describe items, build a first gallery, and set it up for your framework and for server rendering.
- [Roadmap](https://fluidbox.dwe.workers.dev/docs/roadmap.md): Where fluidbox stands before its first release, what 1.0 will promise, what comes after it, and how to help.

## Patterns

- [Overview](https://fluidbox.dwe.workers.dev/docs/patterns.md): Eleven common lightbox setups, each live and in every framework.
- [Gallery](https://fluidbox.dwe.workers.dev/docs/patterns/basic.md): A trigger per photo, with Previous, Next and Close in the viewer.
- [One trigger for an album](https://fluidbox.dwe.workers.dev/docs/patterns/overlay.md): Several items behind one thumbnail that shows the last one viewed, with a count that travels in the flight.
- [Rich origins](https://fluidbox.dwe.workers.dev/docs/patterns/origins.md): Fly from a photo inside a card, and bring the closing item back into view inside a scroller.
- [Custom content](https://fluidbox.dwe.workers.dev/docs/patterns/renderers.md): Your own component as a slide, plus a map, a video and a YouTube embed.
- [Programmatic control](https://fluidbox.dwe.workers.dev/docs/patterns/programmatic.md): Open from code, read the state, log events, and veto navigation.
- [Zoom](https://fluidbox.dwe.workers.dev/docs/patterns/zoom.md): Set the zoom step and maximum, or turn zoom off.
- [Filmstrip](https://fluidbox.dwe.workers.dev/docs/patterns/filmstrip.md): A strip of thumbnails in the viewer, built in or with your own thumbnails.
- [Sheet](https://fluidbox.dwe.workers.dev/docs/patterns/sheet.md): A panel under the photo with snap points, stop buttons and form fields.
- [Headless controls](https://fluidbox.dwe.workers.dev/docs/patterns/headless.md): Your own caption bar and buttons in the viewer, driven by the fluidbox's state and commands.
- [Right to left](https://fluidbox.dwe.workers.dev/docs/patterns/rtl.md): A gallery in an Arabic, right-to-left section, with the viewer's labels in Arabic.
- [Photo in the address](https://fluidbox.dwe.workers.dev/docs/patterns/url.md): Keep the open photo in the address, so a link opens it and Back closes it.

## Frameworks

- [React](https://fluidbox.dwe.workers.dev/docs/react.md): The React binding for fluidbox, with every Fluidbox part, hook and prop, and the React-specific behaviour.
- [Next.js](https://fluidbox.dwe.workers.dev/docs/nextjs.md): Fluidbox in Next.js through the React binding, with the gallery in a client component, the stylesheets in the root layout, next/image triggers, and getImageProps for the viewer's srcset. App Router and Pages Router.
- [Vue](https://fluidbox.dwe.workers.dev/docs/vue.md): The Vue binding for fluidbox, with every component, composable, prop, slot and event, and the Vue-specific behaviour.
- [Solid](https://fluidbox.dwe.workers.dev/docs/solid.md): The Solid binding for fluidbox, with every Fluidbox part, hook and prop, and the Solid-specific behaviour.
- [Angular](https://fluidbox.dwe.workers.dev/docs/angular.md): The Angular binding for fluidbox, with every directive, input, output, template context and inject function, and the Angular-specific behaviour.
- [Custom elements](https://fluidbox.dwe.workers.dev/docs/custom-elements.md): The fluidbox custom elements, with every element, attribute, property, method and event, and how markup becomes gallery items.
- [JavaScript](https://fluidbox.dwe.workers.dev/docs/javascript.md): The plain JavaScript API of fluidbox, with createFluidbox, the fluidbox's state, commands and events, bind and bindOverlay, and viewer content, for apps without a framework binding.

## Guides

- [Items and origins](https://fluidbox.dwe.workers.dev/docs/items-and-origins.md): How fluidbox takes a collection (arrays, lazy lists of any size, setItems) and finds the element each item flies from and back to (triggers, data-fluidbox-origin, the origin adapter for virtualized grids, reveal on close).
- [Media types](https://fluidbox.dwe.workers.dev/docs/media.md): Every item type (img, video, iframe, custom) with all their fields, responsive images with srcset, sizes and sources, thumbnails, placeholders, renderers, and fields of your own.
- [Styling](https://fluidbox.dwe.workers.dev/docs/styling.md): How to theme the fluidbox viewer and style its parts with data attributes and CSS variables, add your own controls and chrome, respect reduced motion, and work with the viewer's body-level layer.
- [Filmstrip and sheet](https://fluidbox.dwe.workers.dev/docs/filmstrip-and-sheet.md): The two optional add-ons, the filmstrip and the sheet, with their imports, every option, sheet stops, the sheetchange event, data-fluidbox-sheet-stop buttons, and sheet.css.
- [Languages and direction](https://fluidbox.dwe.workers.dev/docs/languages.md): Translate the viewer's labels, use an i18n library, and run the viewer right to left.

## Reference

- [API reference](https://fluidbox.dwe.workers.dev/docs/api.md): Every entry point of @ogdakke/fluidbox and every export of the root, read from the package source: createFluidbox options, the Fluidbox, state, events and reasons, items, lists, renderers, origins, labels, the add-ons, each framework binding, the custom elements and the binding kit.
- [CSS reference](https://fluidbox.dwe.workers.dev/docs/css-reference.md): Every CSS custom property, part selector and state attribute fluidbox exposes in styles.css, filmstrip.css and sheet.css, read from the stylesheets and the runtime, with defaults and where each is set or read.
- [Browser support](https://fluidbox.dwe.workers.dev/docs/browser-support.md): Which browsers fluidbox supports, the platform features it relies on, and how the sheet degrades without scroll-driven animations.