Panorama Viewer Gallery Block for React

Four ways. Drag it with a mouse or pen. Scroll it with a wheel, a trackpad or a touch swipe. Focus it (it has a tab stop and a visible focus ring) and use the arrow keys, Home and End. Or click or drag on the minimap, which puts that point at the centre of the view.

The picture's width and height are the window's height times the zoom, so at 100% the whole valley fits the window's height and at 300% it is three times larger both ways, with the region scrolling in both directions. The block remembers the point the view was centred on and puts it back after the picture resizes. The slider, the minus and plus buttons (twenty percent a press) and Reset all go through one handler, and a polite status line says "Zoom 140%".

The same drawing, small, with a rectangle for the part you are looking at. The rectangle moves as you scroll and changes size as you zoom; its position is written straight to the element as CSS variables from the scroll position, so scrolling never re-renders the picture. The minimap is a pointer extra and is hidden from assistive technology: the scroll region and the zoom controls do everything it does.

It is a labelled slider from 100 to 300 in steps of ten, with the value read out as "140%". The Slider is named by an aria-labelledby pointing at its hidden label and reads its value through getAriaValueText(formatted, value).

The viewer is shorter, the slider is hidden and the minus and plus buttons stay, together with the minimap and Reset. A touch drag scrolls the region natively.

Replace the Scene in the scroll region (and in the minimap) with <img alt="" className="size-full object-cover" src={…} /> of a photograph about seven times wider than tall; change RATIO and the 7 in the width to its proportions. The comment above Scene says where.