Project 54, Website sections
Lightbox Gallery with Zoom
Click any photo to see it big. Zoom in to check the details, drag to look around, and flick through the rest with arrows or a swipe.
- Main API
- dialog element
- Zoom
- CSS transform scale
- Dependencies
- None
- Your browser
- Checking
Open a photo
Click a photo. Scroll or double click to zoom, drag to pan, use the arrow keys or swipe, and press Escape to close.
How it works
- Use the native dialogshowModal() gives a real modal: focus is trapped, the page behind is inert and Escape closes it for free.
- Zoom with transformZoom and pan are one CSS transform, translate then scale, so it stays sharp and fast.
- Swipe when not zoomedWhen the photo is at 100 percent a horizontal drag changes photo. When zoomed, dragging pans instead.
grid.onclick = (e) => {
const btn = e.target.closest("button");
show(+btn.dataset.i);
dialog.showModal(); // focus trap + Escape for free
};
view.addEventListener("wheel", (e) => {
e.preventDefault();
zoom = Math.min(5, Math.max(1, zoom * (e.deltaY < 0 ? 1.15 : 0.87)));
img.style.transform = `translate(${x}px,${y}px) scale(${zoom})`;
}, { passive: false });