Lightbox Settings
The lightbox is the full-screen image viewer that opens when visitors click on images. Configure global lightbox settings from the Site Panel.
Navigation Controls
Choose how users navigate between images:
| Control | Description |
|---|---|
| None | No navigation controls shown |
| Arrows | Left/right arrow buttons |
| Dots | Dot indicators at bottom |
| Thumbs | Thumbnail strip for navigation |
UI Color
Set a single color for all lightbox interface elements:
- Counter display (image x of y)
- Navigation arrows
- Close button
- Caption text
Use the compact color picker with hex input and reset option.
Color Matrix
The lightbox uses the same color matrix system as navigation overlays for consistent branding:
| Element | Colors Available |
|---|---|
| Logo | Default, Hover |
| Navigation Links | Default, Hover, Current |
| Social Icons | Default, Hover |
All colors can be customized independently to match your site's design.
Show Logo
Display your site logo within the lightbox overlay.
Logo Size Options
| Size | Description |
|---|---|
| Tiny | Minimal logo presence |
| Small | Compact logo display |
| Medium | Standard logo size |
| Large | Prominent logo display |
| Lock | Custom locked size (requires additional setup) |
Background Color
Customize the lightbox backdrop using:
- Native color picker with visual selector
- Hex color input (#FFFFFF format)
- 12 preset colors (White, Light Gray, Gray, Dark Gray, Black, Red, Orange, Yellow, Green, Blue, Indigo, Purple)
- Reset button to restore default
Opacity Control
Adjust background transparency from 0% to 100% using the opacity slider. The percentage is displayed in real-time.
Caption Settings
Show Caption Toggle
Enable or disable image captions in the lightbox.
Caption Position
- Below Image - Caption appears under the image
- Overlay - Caption overlays the bottom of the image
Typography Controls
Full typography customization for caption text:
| Setting | Options |
|---|---|
| Font Family | Theme Default, Inter, System UI, Georgia, Playfair Display, Roboto, Open Sans, Lato, Montserrat, Source Sans Pro |
| Font Size | Small (12px), Medium (14px), Large (16px), XLarge (18px) |
| Font Weight | Light (300), Regular (400), Medium (500), Semi-Bold (600), Bold (700) |
| Text Transform | None, UPPERCASE, lowercase, Capitalize |
| Letter Spacing | Tight (-0.02em), Normal, Slight (0.02em), Wide (0.05em), Extra Wide (0.1em) |
Mousewheel Interaction
Control what happens when users scroll in the lightbox:
| Mode | Behavior |
|---|---|
| Cycle | Scroll to navigate between images (default) |
| Zoom | Scroll to zoom in/out of current image |
| None | Mousewheel interaction disabled |
Keyboard Shortcuts
The lightbox supports these built-in keyboard controls:
| Key Combination | Action |
|---|---|
| ← → | Navigate to previous/next image |
| Space | Advance to next image |
| Esc | Close lightbox |
| + / - | Zoom in/zoom out |
| 0 | Reset zoom to fit |
| R | Rotate image 90 degrees |
Tips
- Use a dark background with high opacity for photography galleries to minimize distractions
- Enable arrow controls for multi-image galleries where navigation is important
- Match UI colors to your site's color scheme for cohesive branding
- Use "Below Image" captions for detailed descriptions, "Overlay" for brief titles
- The "Cycle" mousewheel mode works well for galleries, while "Zoom" is better for detailed images