Image Zoom Feature - TYPO3 Docs Theme

RST Syntax

.. figure:: /Images/screenshot.png
   :alt: Backend screenshot
   :zoom: lightbox           # lightbox | gallery | inline | lens
   :gallery: screenshots     # Group name for gallery navigation
   :zoom-indicator: true    # Show/hide zoom icon (default: true)
   :class: with-border with-shadow

   Caption text here

1. Lightbox Mode Recommended

Click to open the image in a full-screen overlay dialog. Press Escape or click outside to close.

RST Usage

.. figure:: /Images/screenshot.png
   :zoom: lightbox
   :class: with-border with-shadow

   Click to enlarge

Live Demo

2. Gallery Mode Full Features

Click to open in a gallery viewer. Use ← → to navigate, scroll to zoom, drag to pan.

• Mouse wheel zoom - Scroll to zoom 1x → 4x
• Pan when zoomed - Click and drag to explore
• Gallery navigation - Arrow keys or buttons
• Keyboard shortcuts - +/- zoom, 0 reset, Escape close

RST Usage

.. figure:: /Images/step1.png
   :zoom: gallery
   :gallery: tutorial

   Step 1 of tutorial

Live Demo - Gallery Group "demo"

3. Inline Zoom Mode

Scroll wheel zooms directly on the image. When zoomed, drag to pan. Double-click or Escape to reset.

RST Usage

.. figure:: /Images/diagram.png
   :zoom: inline

   Scroll to zoom in place

Live Demo

4. Lens Mode

A magnifying lens follows your cursor, showing a zoomed view. A result panel appears beside the image.

RST Usage

.. figure:: /Images/detailed.png
   :zoom: lens

   Hover to magnify

Live Demo

Accessibility

All zoom modes support full keyboard navigation:

• Tab - Navigate to images
• Enter / Space - Activate zoom
• Escape - Close/reset
• Arrow keys - Navigate (gallery) or pan (inline/lens)
• + / - - Zoom in/out

Respects prefers-reduced-motion media query.