Skip to main content

Image Lightbox Feature

Overview​

All images in the documentation now support click-to-fullscreen functionality. This feature automatically applies to every image across all documentation pages.

How It Works​

For Users​

  1. Click any image in the documentation to open it in fullscreen mode
  2. The image displays with a dark overlay background
  3. Click again (on the image or overlay) to close the fullscreen view
  4. Press ESC key to close the lightbox
  5. Click the × button in the top-right corner to close

Visual Indicators​

  • Cursor changes to a zoom-in icon when hovering over images
  • Hover effect: Images slightly scale up and show a shadow
  • Magnifying glass icon (🔍) appears on hover to indicate clickability

Features​

  • ✅ Automatic: Works on all images without any special markup
  • ✅ Responsive: Adapts to mobile and desktop screens
  • ✅ Accessible: Includes keyboard support (ESC to close)
  • ✅ Smooth animations: Fade-in/out transitions
  • ✅ Dark mode support: Adapts to light and dark themes
  • ✅ Smart filtering: Excludes small icons, logos, and navbar images

Technical Details​

Implementation​

The lightbox feature is implemented using:

  • React component: ImageLightbox
  • Location: src/components/ImageLightbox/
  • Integration: Injected globally via src/theme/Root.js
  • Auto-detection: MutationObserver watches for new images on page navigation

Files​

src/
├── components/
│   └── ImageLightbox/
│       ├── index.js          # React component with logic
│       └── styles.css         # Lightbox styling
├── theme/
│   └── Root.js                # Global wrapper that loads lightbox
└── css/
    └── custom.css             # Additional image enhancements

Customization​

To modify the lightbox behavior, edit:

  • src/components/ImageLightbox/index.js - Change functionality
  • src/components/ImageLightbox/styles.css - Modify appearance
  • src/css/custom.css (lines 491-531) - Adjust image hover effects

Excluding Images​

To exclude specific images from the lightbox, add them inside elements with these classes:

  • .navbar - Navigation bar
  • .footer - Footer area
  • Images smaller than 100px width are automatically excluded

Browser Support​

  • ✅ Chrome/Edge (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ✅ Mobile browsers

Accessibility​

  • Keyboard navigation (ESC key)
  • ARIA labels for screen readers
  • Focus management
  • High contrast support