5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:Ta10,

Deep Zoom turns any photo into a clickable lightbox you can zoom deep into — scroll or drag to explore every detail, the way a native photo viewer works, built for the web.

Fine-tune the zoom itself — max zoom level, scroll intensity, zoom step, and easing — and choose between a fullscreen lightbox or one that hugs the photo's own ratio.

Want the zoom right in your layout, no lightbox? Check out Deep Zoom Inline, its sibling component.

Usage Note

Great for photographers showcasing work in print-quality detail. The full resolution image only loads once opened, but it's still a full file — mind its weight, since large files affect load time and your Framer plan's bandwidth.

Key Features

Image

Separate Image (canvas) and Full Resolution (lightbox) fields — the heavy file only loads once opened
Upload or URL
Optional hover effect scales the image slightly before opening

Lightbox

Fit to Image hugs the box to the photo's ratio, no bars — or set a fixed Width/Height
Native Radius, framed tightly around the photo
Spring-like pop animation on open and close

Zoom

Scroll to zoom exactly under your cursor, drag to pan
Pinch-to-zoom and one-finger pan on mobile
−/+ buttons, keyboard shortcuts, live zoom percentage
Max Zoom, Scroll Intensity, Step Zoom, and Zoom Smoothing, all adjustable

Navigation

Draggable minimap shows your position inside a zoomed photo
Escape, close button, or click outside — all close the lightbox
Optional download button for the full-resolution file, right in the lightbox

Overlay

Customizable Color and Blur, or fully transparent while keeping click-outside-to-close

Accessibility

Full keyboard support (Tab trapped inside, Escape, +/− zoom) and focus returns to the trigger on close.

How to Set Up

1. Drag Deep Zoom onto your canvas

2. Upload an Image and Full Resolution image

3. Publish

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!

59:[["$","$L5c",null,{"post":{"id":"01a0247d-ca75-779b-81cf-11de7aa1bb10","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"hb9zcKv7LpsIj8ZXADDK","resolved":true,"title":"Deep Zoom","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Deep Zoom","marks":[{"type":"bold"}]},{"type":"text","text":" turns any photo into a clickable lightbox you can zoom deep into — scroll or drag to explore every detail, the way a native photo viewer works, built for the web."}]},{"type":"paragraph","content":[{"type":"text","text":"Fine-tune the zoom itself — max zoom level, scroll intensity, zoom step, and easing — and choose between a fullscreen lightbox or one that hugs the photo's own ratio."}]},{"type":"paragraph","content":[{"type":"text","text":"Want the zoom right in your layout, no lightbox? Check out "},{"type":"text","text":"Deep Zoom Inline","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://sub.chujiqiqi.click/marketplace/components/deep-zoom-inline/","target":"_blank"}}]},{"type":"text","text":", its sibling component."}]},{"type":"customHeading","content":[{"type":"text","text":"Usage Note"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Great for photographers showcasing work in print-quality detail. The full resolution image only loads once opened, but it's still a full file — mind its weight, since large files affect load time and your Framer plan's bandwidth."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Image"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate Image (canvas) and Full Resolution (lightbox) fields — the heavy file only loads once opened"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload or URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hover effect scales the image slightly before opening"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Lightbox"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fit to Image hugs the box to the photo's ratio, no bars — or set a fixed Width/Height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Radius, framed tightly around the photo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring-like pop animation on open and close"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Zoom"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll to zoom exactly under your cursor, drag to pan"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pinch-to-zoom and one-finger pan on mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"−/+ buttons, keyboard shortcuts, live zoom percentage"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Max Zoom, Scroll Intensity, Step Zoom, and Zoom Smoothing, all adjustable"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Navigation"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Draggable minimap shows your position inside a zoomed photo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Escape, close button, or click outside — all close the lightbox"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional download button for the full-resolution file, right in the lightbox"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Overlay"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customizable Color and Blur, or fully transparent while keeping click-outside-to-close"}]},{"type":"customHeading","content":[{"type":"text","text":"Accessibility"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Full keyboard support (Tab trapped inside, Escape, +/− zoom) and focus returns to the trigger on close."}]},{"type":"customHeading","content":[{"type":"text","text":"How to Set Up"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Drag Deep Zoom onto your canvas"}]},{"type":"paragraph","content":[{"type":"text","text":"2. Upload an Image and Full Resolution image"}]},{"type":"paragraph","content":[{"type":"text","text":"3. Publish"}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales of digital products are final and non-refundable. Questions? Contact "},{"type":"text","text":"hellonostromostudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hellonostromostudio@gmail.com","target":"_blank"}}]},{"type":"text","text":" before purchasing. Enjoy!"}]}]},"introduction":"Photo Viewer Lightbox","slug":"deep-zoom","author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/042e00c3-0e8c-49d7-b0d9-458a683d2cbe/01a0247d-59ee-75d9-8dfe-bf6d6b7736e3.jpg"}],"post":null,"createdAt":"2026-08-21T13:23:38.259Z","updatedAt":"2026-08-31T07:33:35.057Z","publishedAt":"2026-08-21T13:23:38.248Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://deepzoom.framer.website/","price":"18","paymentUrl":"https://nostromo.lemonsqueezy.com/checkout/buy/3fee06d9-3537-434f-8428-7866f252aae7","workshop":false,"categories":[{"id":"663c4035-214a-4374-a77c-24d7bcc93fff","name":"Embeds","slug":"embeds"}],"lastSaveId":"PEbpnOQWZ2Sk2NzEbGxl"}}],"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-08-21T13:23:38.741Z","updatedAt":"2026-08-21T13:23:38.741Z","reported":false}}],"$L5e"]

Suggested for you