{tiles.map((item, index) => (
))}
{currentItem.user?.name ?? currentItem.user?.id}
{currentIndex + 1} / {itemCount}
{items.map((item, index) => (
))}
);
};
```
```css label="CSS" title="src/ThumbnailStrip.css"
@layer stream-overrides {
.cookbook-thumbnail-strip {
display: flex;
justify-content: safe center;
gap: var(--str-chat__spacing-xs);
padding: var(--str-chat__spacing-xxs);
overflow-x: auto;
}
.cookbook-thumbnail-strip__thumbnail {
position: relative;
flex-shrink: 0;
width: 64px;
height: 48px;
padding: 0;
overflow: hidden;
border: 2px solid transparent;
border-radius: var(--str-chat__radius-sm);
background: none;
opacity: 0.6;
cursor: pointer;
}
.cookbook-thumbnail-strip__thumbnail[aria-current="true"] {
border-color: var(--str-chat__accent-primary);
opacity: 1;
}
.cookbook-thumbnail-strip__thumbnail:focus-visible {
outline: 2px solid var(--str-chat__border-utility-focused);
outline-offset: 2px;
}
.cookbook-thumbnail-strip__thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cookbook-thumbnail-strip__play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--str-chat__text-on-accent);
}
}
```
## Keyboard and swipe navigation
`useLightboxNavigation` listens for the arrow keys, Home and End while the lightbox is open. It returns pointer handlers for the figure, so a drag to the side steps to the next or the previous item with a finger, a pen or the mouse:
```ts title="src/useLightboxNavigation.ts"
import type { PointerEvent } from "react";
import { useEffect, useRef } from "react";
import { useGalleryContext } from "stream-chat-react";
/** How far, in pixels, a pointer has to travel sideways to count as a swipe. */
const SWIPE_DISTANCE = 50;
/** Whether a key press belongs to a video's own controls, where the arrows seek. */
const isInVideo = (target: EventTarget | null) =>
target instanceof Element && !!target.closest("video");
/**
* Keyboard and swipe navigation for the lightbox. The arrow keys step to the previous or next
* item, Home and End jump to the first and last. Returns pointer handlers for the element a swipe
* starts on: a drag of at least {@link SWIPE_DISTANCE} pixels, more sideways than up or down,
* steps in the direction the content moves, with a finger, a pen or the mouse.
*/
export const useLightboxNavigation = () => {
const { goToIndex, goToNext, goToPrevious, itemCount } = useGalleryContext();
const swipeStart = useRef<{ x: number; y: number }>(undefined);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
if (isInVideo(event.target)) return;
const step = {
ArrowLeft: goToPrevious,
ArrowRight: goToNext,
End: () => goToIndex(itemCount - 1),
Home: () => goToIndex(0),
}[event.key];
if (!step) return;
event.preventDefault();
step();
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [goToIndex, goToNext, goToPrevious, itemCount]);
return {
onPointerCancel: () => {
swipeStart.current = undefined;
},
onPointerDown: (event: PointerEvent) => {
// A drag on a video's timeline seeks; it isn't a swipe.
if (isInVideo(event.target)) return;
swipeStart.current = { x: event.clientX, y: event.clientY };
},
onPointerUp: (event: PointerEvent) => {
const start = swipeStart.current;
swipeStart.current = undefined;
if (!start) return;
const deltaX = event.clientX - start.x;
const deltaY = event.clientY - start.y;
if (
Math.abs(deltaX) < SWIPE_DISTANCE ||
Math.abs(deltaX) <= Math.abs(deltaY)
)
return;
if (deltaX < 0) goToNext();
else goToPrevious();
},
};
};
```
The figure sets `touch-action: pan-y` in `Lightbox.css`, so the browser leaves a sideways swipe to the handlers and still scrolls on a vertical one. `goToNext()` and `goToPrevious()` do nothing at the last and the first item.
## Captions
A Stream image attachment can carry a `title`, which the SDK copies to the gallery item as `title`. Its `fallback`, usually the file name, isn't copied. `LightboxCaption` shows the `title`, or the text of the message the item was shared in when it has none:
```tsx label="React" title="src/LightboxCaption.tsx"
import type { GalleryItem } from "stream-chat-react";
import "./LightboxCaption.css";
/**
* The caption under the current item: the attachment's own `title`, or the text of the message it
* was shared in when the attachment has none.
*/
export const LightboxCaption = ({ item }: { item: GalleryItem }) => {
const caption = item.title || item.message?.text;
if (!caption) return null;
return (