Warren
09f0cb7ae9
feat: Add zoom in/out controls for image preview
Features:
1. Zoom Controls
- 🔍− button: zoom out (20% step)
- 1:1 button: reset to 100%
- 🔍+ button: zoom in (20% step)
- Zoom level display: 100%, 120%, etc.
2. Zoom Range
- Minimum: 20% (0.2x)
- Maximum: 500% (5x)
- Default: 100% (1x)
3. Auto-reset
- Reset zoom to 100% when navigating photos
- Reset when opening new image
4. Layout
- Zoom buttons at top
- Photo in scrollable container
- Left/right arrows for navigation
Implementation:
- CSS transform: scale() for smooth zoom
- Remove max-width/max-height at high zoom
- Zoom level indicator updates dynamically
Files:
- src/page.html (zoomPhoto function, zoom UI)