CMS Gallery Lightbox

Transform Your CMS Collections

A CMS masonry gallery component with built-in GLightbox support, interactive hover effects, and smart image extraction. It effortlessly transforms raw CMS data or custom Framer gallery components into a stunning, fully responsive masonry grid.

Features

Smart Image Extraction Drop any custom component (like a custom 2x3 grid) into the slot, and this component will intelligently extract, deduplicate, and natively render all images into a seamless masonry layout.

Masonry & Grid Layouts Toggle between an automatic responsive masonry layout (perfect for varying image heights) or a clean, fixed-height Grid layout with customizable image fit settings.

GLightbox Integration Click-to-open lightbox for CMS images and videos, complete with fully customizable captions powered by your CMS text fields.

Hover Effects Scale, fade, slide, and bounce animations with customizable overlay colors, icons, and background blur effects.

Use Cases

Portfolio Galleries — Display your creative work with a dynamic masonry layout and professional lightbox experience.

Photography Showcases — Build a stunning, Pinterest-style photography grid that effortlessly scales across devices.

Video Galleries — Showcase your video content natively within a lightbox from your CMS URLs.

How to Use

Installation

VIDEO PLACEHOLDER: Installation Tutorial

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find CMS Gallery Lightbox in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

Connect your Framer CMS collection to the component slot.

Layout Settings

• Toggle between Masonry and Grid Layouts
• Adjust Image Height and Fit (in Grid mode)
• Adjust Columns and Gap
• Customize Item Border Radius and Shadow Intensity

Lightbox & Hover

• Enable or disable the Lightbox
• Enable hover effects and select animations (Scale, Fade, Slide, Bounce)
• Customize the overlay color, icon type (Zoom, Plus, View), icon size, and icon colors

Captions

• Toggle Show Caption to display image information inside the lightbox
• Adjust Caption Font, Color, Background, Padding, and Margin directly from the properties panel

Quick Tips

Custom Components — If you use a custom component variant inside the CMS slot, the Lightbox will automatically extract all its images and render them seamlessly into the masonry grid while ignoring hidden responsive variants.

Best Performance — Optimize your CMS images before uploading them for faster load times.

Layout Sizing — Ensure your container is sized appropriately to allow the masonry layout to render columns correctly on all breakpoints.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Why Designers Love This

It turns standard CMS collections into highly engaging, interactive portfolios instantly, complete with a built-in lightbox experience that usually requires complex external libraries and custom code overrides.