Image Lightbox

CapsuleX includes a built-in lightbox for viewing images in fullscreen mode.

How It Works

Click any image in a blog post to open it in a fullscreen lightbox overlay.

Demo Image 1

Features

  • Fullscreen view — Images are displayed in a fullscreen overlay
  • Keyboard navigation — Use arrow keys to navigate between images
  • Close options — Click the close button, press ESC, or click the overlay background
  • Smooth animations — Fade in/out transitions for a polished experience
  • Multiple images — Navigate between all images in the post

Multiple Images

Here are more example images to test navigation:

Demo Image 2

Demo Image 3

Usage

The lightbox is automatically enabled for all blog posts. Simply:

  1. Add images to your Markdown file using standard syntax
  2. The lightbox will automatically attach click handlers
  3. Click any image to open the fullscreen view

Keyboard Shortcuts

KeyAction
ESCClose lightbox
←Previous image
→Next image

Configuration

The lightbox can be toggled in src/config.ts:

features: {
  lightbox: true,  // Enable image lightbox on click
}