50:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T9b4,

OK Gallery is a modern, fully customizable masonry gallery built for designers who want their images to look intentional, interactive, and beautifully presented.

Arrange images in a clean Pinterest-style grid with configurable columns, uniform spacing, and smooth fade-in animations. Click any image to open a fullscreen lightbox with keyboard navigation. Supports both manual image arrays and CMS collections, all controllable from the property panel.

Perfect for portfolios, image-based storytelling, lookbooks, photography, and polished visual presentations.

If you have any questions or suggestions, don't hesitate to reach out! :)

Features

Masonry grid layout with 1–6 configurable columns
Responsive breakpoints: auto-collapses to 2 columns on tablet, 1 on mobile
Gap control
Staggered fade-in animation on load
Fullscreen customizable lightbox
Keyboard navigation in lightbox (← → arrows, Esc to close)
CMS collection support — connect any Framer CMS collection with custom field mapping

How to use

Add the component to your page
In the property panel, either add images manually under Images, or toggle Use CMS and connect a collection
Adjust Columns and Gap under Layout to fit your grid
Customize hover and lightbox behaviour from their respective sections

CMS Setup

Enable "Use CMS" in the property panel, connect your CMS collection to the Collection field, then set Image Field and Alt Field to match your collection's field names (defaults: image and alt).

Changelog

v2.0.0 — Dec 31, 2024

Lightbox with fullscreen portal rendering fixed
Added keyboard navigation: ← → to cycle images, Esc to close
CMS collection support with custom field mapping

v1.0.0 — Dec 31, 2024

Initial release
Masonry grid with configurable columns and uniform gap
Manual image array mode with demo image fallback
Responsive column breakpoints (desktop / tablet / mobile)
Staggered fade-in animation on image load
Hover effects: zoom, 3D tilt, color overlay

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-504df6f5-3df1-4906-952d-c9c4cbe132d9-all:/unified/creator/504df6f5-3df1-4906-952d-c9c4cbe132d9/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:504df6f5-3df1-4906-952d-c9c4cbe132d9:/unified/posts/?creator=504df6f5-3df1-4906-952d-c9c4cbe132d9&with=reposts":[{"data":[{"id":"019b7530-fe63-790b-ab60-cc383def3b98","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"504df6f5-3df1-4906-952d-c9c4cbe132d9","name":"Yoan Kalthoff","slug":"yoan-kalthoff","avatar":"https://framerusercontent.com/avatars/users/504df6f5-3df1-4906-952d-c9c4cbe132d9/O2yXAhKEr","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TKc145sW0WKDunDWlAVc","resolved":true,"title":"OK Gallery Lite","body":"$51","bodyJson":null,"introduction":"A fully-featured masonry gallery","slug":"ok-gallery-lite","author":{"framerUserId":"504df6f5-3df1-4906-952d-c9c4cbe132d9","name":"Yoan Kalthoff","slug":"yoan-kalthoff","avatar":"https://framerusercontent.com/avatars/users/504df6f5-3df1-4906-952d-c9c4cbe132d9/O2yXAhKEr","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/71jYV5fxlzPpqsM3q7l0/ok-gallery-lite-h5lcjxB2AXbpvQQc5CEEhOxP8Oyc6Z","metadata":{"tint":{"h":0,"s":13,"l":60},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-12T07:38:59.484Z","updatedAt":"2026-05-15T20:50:06.542Z","publishedAt":"2025-12-31T16:15:03.779Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/OK-Gallery-sAAO.js@SvSI0lYOMxp1zVYec4mj","previewUrl":"https://earlier-circumstances-514040.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"SvSI0lYOMxp1zVYec4mj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":67,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-31T16:15:03.779Z","updatedAt":"2025-12-31T16:15:03.779Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]