Image Zooming (Lightbox / Ghost Zoom)

The Lightbox (Ghost Zoom) feature of the TanaFlows theme is a premium, built-in image zooming solution.

When a reader clicks on an image in an article, it gracefully zooms to fill the screen over an elegant dark dimmed backdrop, letting them focus entirely on the finest details without distraction.

Key Benefits & How It Works

The system operates behind the scenes to deliver a high-quality viewing experience through the following mechanisms:

1. Cinematic Zooming

• Natural Transition: Instead of opening the image in a rigid popup window or a new tab, Lightbox uses the native Web Animations API to transition the image from its original position to the center of the screen. The zoom takes 300 milliseconds with a natural transition curve (cubic-bezier(0.4, 0, 0.2, 1)) for a buttery smooth feel.
• Safe Margins: The zoomed image is sized dynamically according to the browser viewport, leaving a 10% safe buffer margin around the edges to prevent the image from touching screen borders, maintaining premium aesthetics.

2. High-Res Swapping

To ensure your pages load as quickly as possible, Ghost posts display compressed images by default. However, when a visitor zooms in:

• Lightbox immediately expands the compressed version first, so the user sees the zoomed image instantly without waiting.
• Concurrently, the system fetches the original high-resolution version (Original Quality) in the background.
• Once loaded, it seamlessly replaces the low-res image without causing any visual jumps or interruptions.

3. UX Hardening & Intuitive Controls

The system provides multiple intuitive ways to interact with zoomed images:

• Cursor Indicators: Hovering over a zoomable image changes the mouse pointer to a plus magnifying glass (zoom-in), and changes to a minus magnifying glass (zoom-out) when the image is fully zoomed.
• Easy Dismissal: Readers can close the zoomed view naturally using any of the following actions:
  1. Click anywhere on the screen (on the image or the dimmed background).
  2. Press the Escape key on the keyboard.
  3. Scroll to Dismiss: Scrolling down or up by more than 50 pixels automatically shrinks the image back to its original position in the text.
  4. Auto-closes when the browser window is resized to prevent UI layout breakage.

4. Hardware & Battery Optimization

• Super Lightweight: Built using pure JavaScript (Vanilla JS), requiring no external library dependencies, minimizing page weight.
• GPU Powered: Applies the willChange CSS attribute to instruct the graphics card (GPU) to handle the transitions, eliminating stutter and lag.