56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3f4g-fr876v8f.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/34g6edkub9lqm.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/16queuxy94k6z.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T9fe,

Gallery Reel is a photo and video gallery component for Framer. Show up to 8 items in a polished viewer with a custom video player, zoom and a fullscreen lightbox - perfect for portfolios, property listings, product pages and case studies.

PHOTOS + YOUTUBE VIDEO IN ONE COMPONENT

Each of the 8 slots has an Image field and an optional Video Link field. Paste a YouTube link and the image becomes the video cover. Empty slots are skipped automatically.

CMS READY

Every slot is its own field, so you can connect each image and video link to a CMS collection. Images keep Framer's built-in optimization.

CUSTOM VIDEO PLAYER

Play, pause, seek, mute, volume control, auto-hiding controls, autoplay, start muted and loop. YouTube videos play inside the same clean player, without YouTube's title, channel or extra buttons, plus optional "Watch on YouTube" and "Copy link" buttons.

TWO LAYOUTS

- Thumbnails: bottom, left or right, with 10 aspect ratios or the original ratio of your first image.

- Grid: 2 or 3 columns with an optional featured first tile.

ZOOM & LIGHTBOX

- Hover zoom that follows your cursor.

- Fullscreen lightbox with click, wheel and two-finger pinch zoom, drag to pan, swipe, arrow keys and a thumbnail strip.

- Keyboard, touch and reduced-motion support.

FULLY CUSTOMIZABLE

Gap, radius, media fit, background, overlay, button colors, fade timing, font and more.

HOW TO USE

1. Drop the component on your canvas.

2. Add images and optional video links, or bind them to CMS fields.

3. Choose a layout and style it in the properties panel.

Tip: for vertical YouTube videos use the youtube.com/shorts/ID link format.

Share your build

If you ship something cool with it, post it on X and tag me @danielgrafix_, or send it over. I'd love to see what you create.

Need help? Questions or feedback?

Reach me anytime: danielgrafix12@gmail.com or on X @danielgrafix_

53:[["$","$L56",null,{"post":{"id":"01a132a4-1ccd-73af-b2a7-a60fd338a394","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7202e78d-eada-41ce-a524-6063cf18b612","name":"Daniel Moreno","slug":"daniel-grafix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7202e78d-eada-41ce-a524-6063cf18b612/1igapi4t","followed":false,"followsYou":false},"media":[],"resources":[{"id":"3P5KFzZdPNujg6kfCNdM","resolved":true,"title":"Gallery Reel","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Gallery Reel","marks":[{"type":"bold"}]},{"type":"text","text":" is a "},{"type":"text","text":"photo","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"video ","marks":[{"type":"bold"}]},{"type":"text","text":"gallery component for Framer. Show up to 8 items in a polished viewer with a custom video player, zoom and a fullscreen lightbox - perfect for portfolios, property listings, product pages and case studies."}]},{"type":"paragraph","content":[{"type":"text","text":"PHOTOS + YOUTUBE VIDEO IN ONE COMPONENT","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Each of the 8 slots has an Image field and an optional Video Link field. Paste a YouTube link and the image becomes the video cover. Empty slots are skipped automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"CMS READY","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every slot is its own field, so you can connect each image and video link to a CMS collection. Images keep Framer's built-in optimization."}]},{"type":"paragraph","content":[{"type":"text","text":"CUSTOM VIDEO PLAYER","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Play, pause, seek, mute, volume control, auto-hiding controls, autoplay, start muted and loop. YouTube videos play inside the same clean player, without YouTube's title, channel or extra buttons, plus optional \"Watch on YouTube\" and \"Copy link\" buttons."}]},{"type":"paragraph","content":[{"type":"text","text":"TWO LAYOUTS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Thumbnails: bottom, left or right, with 10 aspect ratios or the original ratio of your first image."}]},{"type":"paragraph","content":[{"type":"text","text":"- Grid: 2 or 3 columns with an optional featured first tile."}]},{"type":"paragraph","content":[{"type":"text","text":"ZOOM & LIGHTBOX","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Hover zoom that follows your cursor."}]},{"type":"paragraph","content":[{"type":"text","text":"- Fullscreen lightbox with click, wheel and two-finger pinch zoom, drag to pan, swipe, arrow keys and a thumbnail strip."}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard, touch and reduced-motion support."}]},{"type":"paragraph","content":[{"type":"text","text":"FULLY CUSTOMIZABLE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Gap, radius, media fit, background, overlay, button colors, fade timing, font and more."}]},{"type":"paragraph","content":[{"type":"text","text":"HOW TO USE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"1. Drop the component on your canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Add images and optional video links, or bind them to CMS fields."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Choose a layout and style it in the properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Tip: for vertical YouTube videos use the "},{"type":"text","text":"youtube.com/shorts/ID","marks":[{"type":"link","attrs":{"href":"http://youtube.com/shorts/ID","target":"_blank","rel":"noopener noreferrer nofollow"}}]},{"type":"text","text":" link format."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Share your build"}]},{"type":"paragraph","content":[{"type":"text","text":"If you ship something cool with it, post it on X and tag me "},{"type":"text","text":"@danielgrafix_","marks":[{"type":"link","attrs":{"href":"https://x.com/danielgrafix_","target":"_blank","rel":"noopener noreferrer nofollow ugc"}}]},{"type":"text","text":", or send it over. I'd love to see what you create."}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Need help? Questions or feedback?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach me anytime: "},{"type":"text","text":"danielgrafix12@gmail.com","marks":[{"type":"link","attrs":{"href":"mailto:danielgrafix12@gmail.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]},{"type":"text","text":" or on X "},{"type":"text","text":"@danielgrafix_","marks":[{"type":"link","attrs":{"href":"https://x.com/danielgrafix_","target":"_blank","rel":"noopener noreferrer nofollow ugc"}}]}]}]},"introduction":"Photo & video gallery with zoom","slug":"gallery-reel","author":{"framerUserId":"7202e78d-eada-41ce-a524-6063cf18b612","name":"Daniel Moreno","slug":"daniel-grafix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7202e78d-eada-41ce-a524-6063cf18b612/1igapi4t","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7202e78d-eada-41ce-a524-6063cf18b612/01a1308b-1cf2-7035-bdc7-1b66fe7f590e.jpg","metadata":{"tint":{"h":0,"s":53,"l":66},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-13T00:22:57.880Z","updatedAt":"2026-10-16T17:37:50.154Z","publishedAt":"2026-10-13T00:22:57.878Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gallery-reel.framer.website/","price":"12","paymentUrl":"https://buy.polar.sh/polar_cl_dl51zwltbLfgEW640zNU6BRH2RBfKu8Zyy3RN3YJurs","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"mHQQzvbVIsXksrQbN72E","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-13T00:22:58.509Z","updatedAt":"2026-10-13T00:22:58.509Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you