Overview

The Lightbox library in Clutch offers a set of components and templates for displaying images or videos in a modal, immersive view. It’s ideal for creating image galleries, video previews, and single-image popups.

Core Components:

• Dialog - Manages the modal overlay.
• Carousel - Displays images in a swipeable layout.
• LightboxWrapper - Controls rendered slides in carousel views.
• LightboxImage - Renders and sizes the selected image.
• LightboxTrigger - Opens the modal for the associated slide.

Templates:

• Lightbox Carousel - For galleries with multiple images.
• Lightbox Single Image - Simple modal for a single image.
• Lightbox Video - Plays videos in a modal (currently has a known bug in v1.0.3).

How to Use:

• Adding a Lightbox - Insert from the Library and replace placeholder media with your own.
• Enhancing an existing image - Swap your image into the Lightbox Single Image template using LightboxTrigger and LightboxImage.
• Enhancing an existing Carousel - Add the Lightbox Carousel and sync LightboxTrigger and LightboxImage with your carousel slides. Remove unused template components as needed.

Notes:

• Templates can be duplicated or trimmed to match your media count.
• Ordering between triggers and images must align for proper lightbox behavior.
• More template variants (e.g. with zoom or descriptions) are planned—feature requests are welcome via Discord.