Skip to content

Add image scaling to lightboxes

Add controls for zooming in/out of images, and a label indicating the current zoom level, so that users can increase image size to 100% even if it won't fit the viewport.

image.png

Zoom behavior

  • Zoom label shows the current zoom level, will not always start at 100%
  • Starting zoom should be scale-to-fit (no change in behavior, but likely change in logic)
  • Max zoom: 400%
  • Min zoom: 10%
  • Zoom steps: 10 - 50 - [Scale to fit value] - 100 - 200 - 400
  • User can scroll within the lightbox when the image is zoomed past the viewable area

Keyboard controls

  • + zoom in (with exact matching to avoid native cmd/ctrl - + conflict)
  • - zoom out
  • 0 reset zoom to original (scale to fit)
  • 1 set zoom to 100
Edited by 🤖 GitLab Bot 🤖