MediaLiquid Glass
Image Preview
Lightbox gallery with zoom, pan, captions, and download. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add image-previewLightbox gallery
Thumbnails open a zoomable full-screen preview with keyboard navigation.
About this component
Image Preview is part of Media. Lightbox gallery with zoom, pan, captions, and download.
Install with npx @intellihelper/cli@latest add image-preview. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Image Preview
Use when
- Use Image Preview when lightbox gallery with zoom, pan, captions, and download.
- Image lightboxes, audio/video playback, or in-browser crop/filter workflows.
- AI chat attachments, galleries, podcasts, and avatar/product image editing.
Avoid when
- Server-side image pipelines that should not run in the browser.
- Complex NLE timelines — these are product UI primitives, not a video suite.
Accessibility notes
- Lightbox and player controls need accessible names and keyboard support.
- Provide captions/transcripts for meaningful audio and video content.
- Do not rely on color-only filter previews for critical information.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use File Upload for intake, Image Preview for viewing, Image Editor before submit.
- Keep Media Player chrome on the control layer; avoid nesting saturated content cards inside the player shell.