[{"data":1,"prerenderedAt":614},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:Yefxi9wgOasanBxWhICMXlxPxaazyNPJ8a9XFf71-pM":235,"content-page-surround:docs:Yefxi9wgOasanBxWhICMXlxPxaazyNPJ8a9XFf71-pM":611},[4,50,111,152,214],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,35,40,45],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Why Nuxt Photo","content:docs:1.start:1.why-nuxt-photo.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fwhy-nuxt-photo",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Install Nuxt Photo","content:docs:1.start:2.installation.md","1\u002F2","\u002Fdocs\u002Fstart\u002Finstallation",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Build your first album","content:docs:1.start:3.build-your-first-album.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fbuild-your-first-album",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"navigation":33,"path":34},"Choose a component","content:docs:1.start:4.choose-a-component.md","1\u002F4",{"title":30},"\u002Fdocs\u002Fstart\u002Fchoose-a-component",{"title":36,"id":37,"canonicalKey":38,"locale":8,"draft":6,"path":39},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":41,"id":42,"canonicalKey":43,"locale":8,"draft":6,"path":44},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":46,"id":47,"canonicalKey":48,"locale":8,"draft":6,"path":49},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":51,"page":6,"canonicalKey":52,"locale":8,"id":53,"draft":6,"icon":54,"children":55},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[56,61,66,71,76,81,86,91,96,101,106],{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":6,"path":60},"Use CMS photos","content:docs:2.guides:1.use-cms-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-cms-photos",{"title":62,"id":63,"canonicalKey":64,"locale":8,"draft":6,"path":65},"Use Nuxt Image","content:docs:2.guides:2.use-nuxt-image.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fuse-nuxt-image",{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":6,"path":70},"Style with Tailwind","content:docs:2.guides:3.style-with-tailwind.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fstyle-with-tailwind",{"title":72,"id":73,"canonicalKey":74,"locale":8,"draft":6,"path":75},"Share one lightbox","content:docs:2.guides:4.share-one-lightbox.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":77,"id":78,"canonicalKey":79,"locale":8,"draft":6,"path":80},"Build a carousel","content:docs:2.guides:5.build-a-carousel.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":82,"id":83,"canonicalKey":84,"locale":8,"draft":6,"path":85},"Tune responsive layouts","content:docs:2.guides:6.tune-responsive-layouts.md","2\u002F6","\u002Fdocs\u002Fguides\u002Ftune-responsive-layouts",{"title":87,"id":88,"canonicalKey":89,"locale":8,"draft":6,"path":90},"Create a custom thumbnail layout","content:docs:2.guides:7.create-a-custom-thumbnail-layout.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":92,"id":93,"canonicalKey":94,"locale":8,"draft":6,"path":95},"Customize the built-in lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":97,"id":98,"canonicalKey":99,"locale":8,"draft":6,"path":100},"Build a lightbox from primitives","content:docs:2.guides:9.build-a-lightbox-from-primitives.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":102,"id":103,"canonicalKey":104,"locale":8,"draft":6,"path":105},"Integrate a custom image service","content:docs:2.guides:10.integrate-a-custom-image-service.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":107,"id":108,"canonicalKey":109,"locale":8,"draft":6,"path":110},"Control a lightbox programmatically","content:docs:2.guides:11.control-a-lightbox-programmatically.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-a-lightbox-programmatically",{"title":112,"page":6,"canonicalKey":113,"locale":8,"id":114,"draft":6,"icon":115,"children":116},"Concepts","3","content:docs:3.concepts:.navigation.yml","i-lucide-compass",[117,122,127,132,137,142,147],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo data and dimensions","content:docs:3.concepts:1.photo-data-and-dimensions.md","3\u002F1","\u002Fdocs\u002Fconcepts\u002Fphoto-data-and-dimensions",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"Collections and navigation order","content:docs:3.concepts:2.collections-and-navigation-order.md","3\u002F2","\u002Fdocs\u002Fconcepts\u002Fcollections-and-navigation-order",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"Layouts and responsive values","content:docs:3.concepts:3.layouts-and-responsive-values.md","3\u002F3","\u002Fdocs\u002Fconcepts\u002Flayouts-and-responsive-values",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"SSR and layout stability","content:docs:3.concepts:4.ssr-and-layout-stability.md","3\u002F4","\u002Fdocs\u002Fconcepts\u002Fssr-and-layout-stability",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Image delivery","content:docs:3.concepts:5.image-delivery.md","3\u002F5","\u002Fdocs\u002Fconcepts\u002Fimage-delivery",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Lightbox, gestures, and accessibility","content:docs:3.concepts:6.lightbox-gestures-and-accessibility.md","3\u002F6","\u002Fdocs\u002Fconcepts\u002Flightbox-gestures-and-accessibility",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Customization levels","content:docs:3.concepts:7.customization-levels.md","3\u002F7","\u002Fdocs\u002Fconcepts\u002Fcustomization-levels",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"icon":156,"sidebar":11,"path":157,"children":158},"Reference","content:docs:4.reference:.navigation.yml","4","i-lucide-braces","\u002Fdocs\u002Freference",[159,164,169,174,179,184,189,194,199,204,209],{"title":160,"id":161,"canonicalKey":162,"locale":8,"draft":6,"path":163},"Photo","content:docs:4.reference:2.photo.md","4\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":165,"id":166,"canonicalKey":167,"locale":8,"draft":6,"path":168},"PhotoAlbum","content:docs:4.reference:3.photo-album.md","4\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":170,"id":171,"canonicalKey":172,"locale":8,"draft":6,"path":173},"PhotoGroup","content:docs:4.reference:4.photo-group.md","4\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":175,"id":176,"canonicalKey":177,"locale":8,"draft":6,"path":178},"PhotoCarousel","content:docs:4.reference:5.photo-carousel.md","4\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":180,"id":181,"canonicalKey":182,"locale":8,"draft":6,"path":183},"Lightbox","content:docs:4.reference:6.lightbox.md","4\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":185,"id":186,"canonicalKey":187,"locale":8,"draft":6,"path":188},"Lightbox primitives API","content:docs:4.reference:7.primitives.md","4\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":190,"id":191,"canonicalKey":192,"locale":8,"draft":6,"path":193},"Composables","content:docs:4.reference:8.composables.md","4\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":195,"id":196,"canonicalKey":197,"locale":8,"draft":6,"path":198},"Configuration and labels","content:docs:4.reference:9.configuration-and-labels.md","4\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":200,"id":201,"canonicalKey":202,"locale":8,"draft":6,"path":203},"Types","content:docs:4.reference:10.types.md","4\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":205,"id":206,"canonicalKey":207,"locale":8,"draft":6,"path":208},"CSS","content:docs:4.reference:11.css.md","4\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":210,"id":211,"canonicalKey":212,"locale":8,"draft":6,"path":213},"Package exports","content:docs:4.reference:12.package-exports.md","4\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":215,"page":6,"canonicalKey":216,"locale":8,"id":217,"draft":6,"icon":218,"children":219},"Help","5","content:docs:5.help:.navigation.yml","i-lucide-life-buoy",[220,225,230],{"title":221,"id":222,"canonicalKey":223,"locale":8,"draft":6,"path":224},"Troubleshooting","content:docs:5.help:1.troubleshooting.md","5\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":226,"id":227,"canonicalKey":228,"locale":8,"draft":6,"path":229},"Known constraints","content:docs:5.help:2.known-constraints.md","5\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":231,"id":232,"canonicalKey":233,"locale":8,"draft":6,"path":234},"Upgrade from 0.2 to 1.0","content:docs:5.help:3.upgrade-from-0-2-to-1-0.md","5\u002F3","\u002Fdocs\u002Fhelp\u002Fupgrade-from-0-2-to-1-0",{"title":143,"description":236,"body":237,"type":598,"id":144,"canonicalKey":145,"draft":6,"partial":6,"locale":8,"collection":599,"navigationFile":6,"file":600,"route":606,"resolution":608},"Understand modal ownership, opening animation, input, focus, and reduced motion.",{"type":238,"children":239,"toc":589},"root",[240,248,252,256,263,268,361,384,389,395,529,547,553,558,564,576],{"type":241,"tag":242,"props":243,"children":244},"element","p",{},[245],{"type":246,"value":247},"text","The included lightbox is a modal viewer. While open, it owns keyboard input,\nmoves focus into the viewer, and makes the page behind it inert.",{"type":241,"tag":249,"props":250,"children":251},"gesture-lab",{},[],{"type":241,"tag":253,"props":254,"children":255},"accessibility-lab",{},[],{"type":241,"tag":257,"props":258,"children":260},"h2",{"id":259},"opening-animation",[261],{"type":246,"value":262},"Opening animation",{"type":241,"tag":242,"props":264,"children":265},{},[266],{"type":246,"value":267},"A FLIP transition measures the thumbnail's first position and the slide's final\nposition, then animates between them. FLIP means First, Last, Invert, Play.",{"type":241,"tag":269,"props":270,"children":271},"table",{},[272,291],{"type":241,"tag":273,"props":274,"children":275},"thead",{},[276],{"type":241,"tag":277,"props":278,"children":279},"tr",{},[280,286],{"type":241,"tag":281,"props":282,"children":283},"th",{},[284],{"type":246,"value":285},"Mode",{"type":241,"tag":281,"props":287,"children":288},{},[289],{"type":246,"value":290},"Behavior",{"type":241,"tag":292,"props":293,"children":294},"tbody",{},[295,313,329,345],{"type":241,"tag":277,"props":296,"children":297},{},[298,308],{"type":241,"tag":299,"props":300,"children":301},"td",{},[302],{"type":241,"tag":303,"props":304,"children":305},"code",{},[306],{"type":246,"value":307},"auto",{"type":241,"tag":299,"props":309,"children":310},{},[311],{"type":246,"value":312},"Uses FLIP when enough of the thumbnail is visible; otherwise fades.",{"type":241,"tag":277,"props":314,"children":315},{},[316,324],{"type":241,"tag":299,"props":317,"children":318},{},[319],{"type":241,"tag":303,"props":320,"children":321},{},[322],{"type":246,"value":323},"flip",{"type":241,"tag":299,"props":325,"children":326},{},[327],{"type":246,"value":328},"Always tries to animate from the thumbnail.",{"type":241,"tag":277,"props":330,"children":331},{},[332,340],{"type":241,"tag":299,"props":333,"children":334},{},[335],{"type":241,"tag":303,"props":336,"children":337},{},[338],{"type":246,"value":339},"fade",{"type":241,"tag":299,"props":341,"children":342},{},[343],{"type":246,"value":344},"Cross-fades without moving from the thumbnail.",{"type":241,"tag":277,"props":346,"children":347},{},[348,356],{"type":241,"tag":299,"props":349,"children":350},{},[351],{"type":241,"tag":303,"props":352,"children":353},{},[354],{"type":246,"value":355},"none",{"type":241,"tag":299,"props":357,"children":358},{},[359],{"type":246,"value":360},"Opens without a transition.",{"type":241,"tag":242,"props":362,"children":363},{},[364,368,370,375,377,382],{"type":241,"tag":303,"props":365,"children":366},{},[367],{"type":246,"value":307},{"type":246,"value":369}," is the default. ",{"type":241,"tag":303,"props":371,"children":372},{},[373],{"type":246,"value":374},"autoThreshold",{"type":246,"value":376}," defaults to ",{"type":241,"tag":303,"props":378,"children":379},{},[380],{"type":246,"value":381},"0.55",{"type":246,"value":383},", which means at least\n55 percent of the thumbnail must be visible. Raise the threshold when movement\nfrom partly hidden thumbnails is distracting.",{"type":241,"tag":242,"props":385,"children":386},{},[387],{"type":246,"value":388},"Closing returns to the original visible thumbnail when possible. It fades when\nthat thumbnail is gone or outside the viewport.",{"type":241,"tag":257,"props":390,"children":392},{"id":391},"keyboard-controls",[393],{"type":246,"value":394},"Keyboard controls",{"type":241,"tag":269,"props":396,"children":397},{},[398,414],{"type":241,"tag":273,"props":399,"children":400},{},[401],{"type":241,"tag":277,"props":402,"children":403},{},[404,409],{"type":241,"tag":281,"props":405,"children":406},{},[407],{"type":246,"value":408},"Key",{"type":241,"tag":281,"props":410,"children":411},{},[412],{"type":246,"value":413},"Action",{"type":241,"tag":292,"props":415,"children":416},{},[417,433,449,465,481,497,513],{"type":241,"tag":277,"props":418,"children":419},{},[420,428],{"type":241,"tag":299,"props":421,"children":422},{},[423],{"type":241,"tag":303,"props":424,"children":425},{},[426],{"type":246,"value":427},"Escape",{"type":241,"tag":299,"props":429,"children":430},{},[431],{"type":246,"value":432},"Close and restore focus to the opening control.",{"type":241,"tag":277,"props":434,"children":435},{},[436,444],{"type":241,"tag":299,"props":437,"children":438},{},[439],{"type":241,"tag":303,"props":440,"children":441},{},[442],{"type":246,"value":443},"ArrowRight",{"type":241,"tag":299,"props":445,"children":446},{},[447],{"type":246,"value":448},"Show the next photo, or pan when the current image is zoomed.",{"type":241,"tag":277,"props":450,"children":451},{},[452,460],{"type":241,"tag":299,"props":453,"children":454},{},[455],{"type":241,"tag":303,"props":456,"children":457},{},[458],{"type":246,"value":459},"ArrowLeft",{"type":241,"tag":299,"props":461,"children":462},{},[463],{"type":246,"value":464},"Show the previous photo, or pan when zoomed.",{"type":241,"tag":277,"props":466,"children":467},{},[468,476],{"type":241,"tag":299,"props":469,"children":470},{},[471],{"type":241,"tag":303,"props":472,"children":473},{},[474],{"type":246,"value":475},"Home",{"type":241,"tag":299,"props":477,"children":478},{},[479],{"type":246,"value":480},"Show the first photo.",{"type":241,"tag":277,"props":482,"children":483},{},[484,492],{"type":241,"tag":299,"props":485,"children":486},{},[487],{"type":241,"tag":303,"props":488,"children":489},{},[490],{"type":246,"value":491},"End",{"type":241,"tag":299,"props":493,"children":494},{},[495],{"type":246,"value":496},"Show the last photo.",{"type":241,"tag":277,"props":498,"children":499},{},[500,508],{"type":241,"tag":299,"props":501,"children":502},{},[503],{"type":241,"tag":303,"props":504,"children":505},{},[506],{"type":246,"value":507},"z",{"type":241,"tag":299,"props":509,"children":510},{},[511],{"type":246,"value":512},"Toggle the secondary zoom level.",{"type":241,"tag":277,"props":514,"children":515},{},[516,524],{"type":241,"tag":299,"props":517,"children":518},{},[519],{"type":241,"tag":303,"props":520,"children":521},{},[522],{"type":246,"value":523},"Tab",{"type":241,"tag":299,"props":525,"children":526},{},[527],{"type":246,"value":528},"Move through the lightbox controls.",{"type":241,"tag":242,"props":530,"children":531},{},[532,534,539,541,545],{"type":246,"value":533},"Right-to-left direction reverses directional navigation. Text fields, text\nareas, selects, and editable content keep their keyboard input. Other controls\nreceive the event before the lightbox. Call ",{"type":241,"tag":303,"props":535,"children":536},{},[537],{"type":246,"value":538},"event.preventDefault()",{"type":246,"value":540}," from a\ncustom control when it must suppress a built-in shortcut such as Escape, an\narrow key, Home, End, or ",{"type":241,"tag":303,"props":542,"children":543},{},[544],{"type":246,"value":507},{"type":246,"value":546},".",{"type":241,"tag":257,"props":548,"children":550},{"id":549},"pointer-gestures",[551],{"type":246,"value":552},"Pointer gestures",{"type":241,"tag":242,"props":554,"children":555},{},[556],{"type":246,"value":557},"Dragging moves a zoomed image. A horizontal drag at the fitted scale can settle\non the previous or next photo. Pinch and wheel input change zoom where the\ndevice supports them.",{"type":241,"tag":257,"props":559,"children":561},{"id":560},"reduced-motion",[562],{"type":246,"value":563},"Reduced motion",{"type":241,"tag":242,"props":565,"children":566},{},[567,569,574],{"type":246,"value":568},"Nuxt Photo observes ",{"type":241,"tag":303,"props":570,"children":571},{},[572],{"type":246,"value":573},"prefers-reduced-motion",{"type":246,"value":575},". It replaces movement-heavy\ntransitions with a short fade and reacts when the preference changes. Custom\nlightbox content must provide its own reduced-motion treatment.",{"type":241,"tag":242,"props":577,"children":578},{},[579,581,587],{"type":246,"value":580},"Use native buttons for custom controls and retain visible focus styles. The\n",{"type":241,"tag":582,"props":583,"children":584},"a",{"href":100},[585],{"type":246,"value":586},"primitives guide",{"type":246,"value":588}," shows the\nlower-level structure.",{"title":590,"searchDepth":591,"depth":591,"links":592},"",4,[593,595,596,597],{"id":259,"depth":594,"text":262},2,{"id":391,"depth":594,"text":394},{"id":549,"depth":594,"text":552},{"id":560,"depth":594,"text":563},"markdown","docs",{"source":601,"path":602,"stem":603,"dir":604,"extension":605},"content","docs\u002F3.concepts\u002F6.lightbox-gestures-and-accessibility.md","docs\u002F3.concepts\u002F6.lightbox-gestures-and-accessibility","concepts","md",{"requestedPath":146,"resolvedPath":146,"alternates":607},[],{"requested":609,"resolved":610,"usedFallback":6},{},{"locale":8},{"previous":612,"next":613},{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},1788702884459]