[{"data":1,"prerenderedAt":1529},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:W8tNLGFvfw09UXqgFYFgV2ZAMedC7ZvBg6dVE3OcVb8":188,"content-page-surround:docs:W8tNLGFvfw09UXqgFYFgV2ZAMedC7ZvBg6dVE3OcVb8":1514,"i-logos:vue":1518,"i-lucide:clipboard":1523,"i-logos:nuxt-icon":1526},[4,49,110,172],{"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,34,39,44],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Introduction","content:docs:1.start:1.introduction.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fintroduction",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Get started","content:docs:1.start:2.get-started.md","1\u002F2","\u002Fdocs\u002Fstart\u002Fget-started",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Examples","content:docs:1.start:3.examples.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fexamples",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},"AI coding agents","content:docs:1.start:4.ai-agents.md","1\u002F4","\u002Fdocs\u002Fstart\u002Fai-agents",{"title":35,"id":36,"canonicalKey":37,"locale":8,"draft":6,"path":38},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":40,"id":41,"canonicalKey":42,"locale":8,"draft":6,"path":43},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":45,"id":46,"canonicalKey":47,"locale":8,"draft":6,"path":48},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":50,"page":6,"canonicalKey":51,"locale":8,"id":52,"draft":6,"icon":53,"children":54},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[55,60,65,70,75,80,85,90,95,100,105],{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},"Use your own photos","content:docs:2.guides:1.use-your-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-your-photos",{"title":61,"id":62,"canonicalKey":63,"locale":8,"draft":6,"path":64},"Responsive layouts and SSR","content:docs:2.guides:2.responsive-layouts.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fresponsive-layouts",{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},"Share one lightbox","content:docs:2.guides:3.share-one-lightbox.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},"Build a carousel","content:docs:2.guides:4.build-a-carousel.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":76,"id":77,"canonicalKey":78,"locale":8,"draft":6,"path":79},"Deliver images","content:docs:2.guides:5.deliver-images.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fdeliver-images",{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},"Integrate a custom image service","content:docs:2.guides:6.integrate-a-custom-image-service.md","2\u002F6","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":86,"id":87,"canonicalKey":88,"locale":8,"draft":6,"path":89},"Style and theme","content:docs:2.guides:7.style-and-theme.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fstyle-and-theme",{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},"Customize the lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":96,"id":97,"canonicalKey":98,"locale":8,"draft":6,"path":99},"Create a custom thumbnail layout","content:docs:2.guides:9.create-a-custom-thumbnail-layout.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":101,"id":102,"canonicalKey":103,"locale":8,"draft":6,"path":104},"Build a lightbox from primitives","content:docs:2.guides:10.build-a-lightbox-from-primitives.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":106,"id":107,"canonicalKey":108,"locale":8,"draft":6,"path":109},"Control the lightbox from code","content:docs:2.guides:11.control-the-lightbox.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-the-lightbox",{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":6,"icon":114,"sidebar":11,"path":115,"children":116},"Reference","content:docs:3.reference:.navigation.yml","3","i-lucide-braces","\u002Fdocs\u002Freference",[117,122,127,132,137,142,147,152,157,162,167],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo","content:docs:3.reference:2.photo.md","3\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"PhotoAlbum","content:docs:3.reference:3.photo-album.md","3\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"PhotoGroup","content:docs:3.reference:4.photo-group.md","3\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"PhotoCarousel","content:docs:3.reference:5.photo-carousel.md","3\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Lightbox","content:docs:3.reference:6.lightbox.md","3\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Primitives","content:docs:3.reference:7.primitives.md","3\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Composables","content:docs:3.reference:8.composables.md","3\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"path":156},"Configuration and labels","content:docs:3.reference:9.configuration-and-labels.md","3\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":158,"id":159,"canonicalKey":160,"locale":8,"draft":6,"path":161},"Types","content:docs:3.reference:10.types.md","3\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":163,"id":164,"canonicalKey":165,"locale":8,"draft":6,"path":166},"CSS","content:docs:3.reference:11.css.md","3\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":168,"id":169,"canonicalKey":170,"locale":8,"draft":6,"path":171},"Package exports","content:docs:3.reference:12.package-exports.md","3\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":173,"page":6,"canonicalKey":174,"locale":8,"id":175,"draft":6,"icon":176,"children":177},"Help","4","content:docs:4.help:.navigation.yml","i-lucide-life-buoy",[178,183],{"title":179,"id":180,"canonicalKey":181,"locale":8,"draft":6,"path":182},"Troubleshooting","content:docs:4.help:1.troubleshooting.md","4\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":184,"id":185,"canonicalKey":186,"locale":8,"draft":6,"path":187},"Known constraints","content:docs:4.help:2.known-constraints.md","4\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":20,"description":189,"redirectFrom":190,"body":193,"type":1501,"id":21,"canonicalKey":22,"draft":6,"partial":6,"locale":8,"collection":1502,"navigationFile":6,"file":1503,"route":1509,"resolution":1511},"Install the Nuxt module, paste a complete album page, and check the lightbox. Then replace the sample photos with your own.",[191,192],"\u002Fdocs\u002Fstart\u002Finstallation","\u002Fdocs\u002Fstart\u002Fbuild-your-first-album",{"type":194,"children":195,"toc":1492},"root",[196,204,220,247,254,260,424,473,479,1255,1260,1266,1277,1318,1324,1329,1421,1446,1463,1480],{"type":197,"tag":198,"props":199,"children":200},"element","p",{},[201],{"type":202,"value":203},"text","In five minutes you have a styled album with a working lightbox.",{"type":197,"tag":205,"props":206,"children":209},"warning",{"$":207},{"component":208,"block":208},1,[210,212,218],{"type":202,"value":211},"These docs describe the Nuxt Photo 1.0 beta. Install the ",{"type":197,"tag":213,"props":214,"children":215},"code",{},[216],{"type":202,"value":217},"next",{"type":202,"value":219}," tag.",{"type":197,"tag":198,"props":221,"children":222},{},[223,225,231,233,238,240,245],{"type":202,"value":224},"You need Nuxt ",{"type":197,"tag":226,"props":227,"children":228},"strong",{},[229],{"type":202,"value":230},"4.4.8",{"type":202,"value":232}," or later in Nuxt 4, and Node ",{"type":197,"tag":226,"props":234,"children":235},{},[236],{"type":202,"value":237},"22.18+",{"type":202,"value":239}," or ",{"type":197,"tag":226,"props":241,"children":242},{},[243],{"type":202,"value":244},"24.11+",{"type":202,"value":246},".",{"type":197,"tag":248,"props":249,"children":251},"h2",{"id":250},"_1-install-the-module",[252],{"type":202,"value":253},"1. Install the module",{"type":197,"tag":255,"props":256,"children":259},"pm-install",{"name":257,"$":258},"@lupinum\u002Fnuxt-photo@next",{"component":208,"block":208},[],{"type":197,"tag":261,"props":262,"children":266},"pre",{"language":263,"filename":264,"class":265},"ts","nuxt.config.ts","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[267],{"type":197,"tag":213,"props":268,"children":270},{"class":269},"language-ts",[271,306,308,352,353,370,371,401,402,410,411],{"type":197,"tag":272,"props":273,"children":276},"span",{"class":274,"style":275},"line","display: inline",[277,283,288,294,300],{"type":197,"tag":272,"props":278,"children":280},{"style":279},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[281],{"type":202,"value":282},"export",{"type":197,"tag":272,"props":284,"children":285},{"style":279},[286],{"type":202,"value":287}," default",{"type":197,"tag":272,"props":289,"children":291},{"style":290},"color:#6182B8;--shiki-dark:#82AAFF",[292],{"type":202,"value":293}," defineNuxtConfig",{"type":197,"tag":272,"props":295,"children":297},{"style":296},"color:#90A4AE;--shiki-dark:#BABED8",[298],{"type":202,"value":299},"(",{"type":197,"tag":272,"props":301,"children":303},{"style":302},"color:#39ADB5;--shiki-dark:#89DDFF",[304],{"type":202,"value":305},"{",{"type":202,"value":307},"\n",{"type":197,"tag":272,"props":309,"children":310},{"class":274,"style":275},[311,317,322,327,332,338,342,347],{"type":197,"tag":272,"props":312,"children":314},{"style":313},"color:#E53935;--shiki-dark:#F07178",[315],{"type":202,"value":316},"  modules",{"type":197,"tag":272,"props":318,"children":319},{"style":302},[320],{"type":202,"value":321},":",{"type":197,"tag":272,"props":323,"children":324},{"style":296},[325],{"type":202,"value":326}," [",{"type":197,"tag":272,"props":328,"children":329},{"style":302},[330],{"type":202,"value":331},"'",{"type":197,"tag":272,"props":333,"children":335},{"style":334},"color:#91B859;--shiki-dark:#C3E88D",[336],{"type":202,"value":337},"@lupinum\u002Fnuxt-photo",{"type":197,"tag":272,"props":339,"children":340},{"style":302},[341],{"type":202,"value":331},{"type":197,"tag":272,"props":343,"children":344},{"style":296},[345],{"type":202,"value":346},"]",{"type":197,"tag":272,"props":348,"children":349},{"style":302},[350],{"type":202,"value":351},",",{"type":202,"value":307},{"type":197,"tag":272,"props":354,"children":355},{"class":274,"style":275},[356,361,365],{"type":197,"tag":272,"props":357,"children":358},{"style":313},[359],{"type":202,"value":360},"  nuxtPhoto",{"type":197,"tag":272,"props":362,"children":363},{"style":302},[364],{"type":202,"value":321},{"type":197,"tag":272,"props":366,"children":367},{"style":302},[368],{"type":202,"value":369}," {",{"type":202,"value":307},{"type":197,"tag":272,"props":372,"children":373},{"class":274,"style":275},[374,379,383,388,393,397],{"type":197,"tag":272,"props":375,"children":376},{"style":313},[377],{"type":202,"value":378},"    css",{"type":197,"tag":272,"props":380,"children":381},{"style":302},[382],{"type":202,"value":321},{"type":197,"tag":272,"props":384,"children":385},{"style":302},[386],{"type":202,"value":387}," '",{"type":197,"tag":272,"props":389,"children":390},{"style":334},[391],{"type":202,"value":392},"all",{"type":197,"tag":272,"props":394,"children":395},{"style":302},[396],{"type":202,"value":331},{"type":197,"tag":272,"props":398,"children":399},{"style":302},[400],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":403,"children":404},{"class":274,"style":275},[405],{"type":197,"tag":272,"props":406,"children":407},{"style":302},[408],{"type":202,"value":409},"  },",{"type":202,"value":307},{"type":197,"tag":272,"props":412,"children":413},{"class":274,"style":275},[414,419],{"type":197,"tag":272,"props":415,"children":416},{"style":302},[417],{"type":202,"value":418},"}",{"type":197,"tag":272,"props":420,"children":421},{"style":296},[422],{"type":202,"value":423},")",{"type":197,"tag":198,"props":425,"children":426},{},[427,429,433,435,439,440,444,446,450,452,457,459,464,466,471],{"type":202,"value":428},"The module registers ",{"type":197,"tag":213,"props":430,"children":431},{},[432],{"type":202,"value":118},{"type":202,"value":434},", ",{"type":197,"tag":213,"props":436,"children":437},{},[438],{"type":202,"value":123},{"type":202,"value":434},{"type":197,"tag":213,"props":441,"children":442},{},[443],{"type":202,"value":128},{"type":202,"value":445},", and ",{"type":197,"tag":213,"props":447,"children":448},{},[449],{"type":202,"value":133},{"type":202,"value":451},",\nand auto-imports helpers such as ",{"type":197,"tag":213,"props":453,"children":454},{},[455],{"type":202,"value":456},"responsive",{"type":202,"value":458}," and ",{"type":197,"tag":213,"props":460,"children":461},{},[462],{"type":202,"value":463},"useLightbox",{"type":202,"value":465},". ",{"type":197,"tag":213,"props":467,"children":468},{},[469],{"type":202,"value":470},"css: 'all'",{"type":202,"value":472},"\nadds the complete look. Without it you get only the structure CSS, for apps\nthat bring their own theme.",{"type":197,"tag":248,"props":474,"children":476},{"id":475},"_2-add-an-album-page",[477],{"type":202,"value":478},"2. Add an album page",{"type":197,"tag":261,"props":480,"children":483},{"language":481,"filename":482,"class":265},"vue","app\u002Fpages\u002Fgallery.vue",[484],{"type":197,"tag":213,"props":485,"children":487},{"class":486},"language-vue",[488,535,536,581,582,585,586,621,622,630,631,660,661,690,691,713,714,735,736,765,766,795,796,803,804,811,812,840,841,869,870,890,891,911,912,940,941,969,970,977,978,985,986,1014,1015,1043,1044,1063,1064,1083,1084,1112,1113,1141,1142,1149,1150,1157,1158,1174,1175,1178,1179,1195,1196,1239,1240],{"type":197,"tag":272,"props":489,"children":490},{"class":274,"style":275},[491,496,501,507,512,517,522,526,530],{"type":197,"tag":272,"props":492,"children":493},{"style":302},[494],{"type":202,"value":495},"\u003C",{"type":197,"tag":272,"props":497,"children":498},{"style":313},[499],{"type":202,"value":500},"script",{"type":197,"tag":272,"props":502,"children":504},{"style":503},"color:#9C3EDA;--shiki-dark:#C792EA",[505],{"type":202,"value":506}," setup",{"type":197,"tag":272,"props":508,"children":509},{"style":503},[510],{"type":202,"value":511}," lang",{"type":197,"tag":272,"props":513,"children":514},{"style":302},[515],{"type":202,"value":516},"=",{"type":197,"tag":272,"props":518,"children":519},{"style":302},[520],{"type":202,"value":521},"\"",{"type":197,"tag":272,"props":523,"children":524},{"style":334},[525],{"type":202,"value":263},{"type":197,"tag":272,"props":527,"children":528},{"style":302},[529],{"type":202,"value":521},{"type":197,"tag":272,"props":531,"children":532},{"style":302},[533],{"type":202,"value":534},">",{"type":202,"value":307},{"type":197,"tag":272,"props":537,"children":538},{"class":274,"style":275},[539,544,549,553,558,563,568,572,577],{"type":197,"tag":272,"props":540,"children":541},{"style":279},[542],{"type":202,"value":543},"import",{"type":197,"tag":272,"props":545,"children":546},{"style":279},[547],{"type":202,"value":548}," type",{"type":197,"tag":272,"props":550,"children":551},{"style":302},[552],{"type":202,"value":369},{"type":197,"tag":272,"props":554,"children":555},{"style":296},[556],{"type":202,"value":557}," PhotoItem",{"type":197,"tag":272,"props":559,"children":560},{"style":302},[561],{"type":202,"value":562}," }",{"type":197,"tag":272,"props":564,"children":565},{"style":279},[566],{"type":202,"value":567}," from",{"type":197,"tag":272,"props":569,"children":570},{"style":302},[571],{"type":202,"value":387},{"type":197,"tag":272,"props":573,"children":574},{"style":334},[575],{"type":202,"value":576},"@lupinum\u002Fnuxt-photo\u002Fapp",{"type":197,"tag":272,"props":578,"children":579},{"style":302},[580],{"type":202,"value":331},{"type":202,"value":307},{"type":197,"tag":272,"props":583,"children":584},{"class":274,"style":275},[],{"type":202,"value":307},{"type":197,"tag":272,"props":587,"children":588},{"class":274,"style":275},[589,594,599,603,608,613,617],{"type":197,"tag":272,"props":590,"children":591},{"style":503},[592],{"type":202,"value":593},"const",{"type":197,"tag":272,"props":595,"children":596},{"style":296},[597],{"type":202,"value":598}," photos",{"type":197,"tag":272,"props":600,"children":601},{"style":302},[602],{"type":202,"value":321},{"type":197,"tag":272,"props":604,"children":606},{"style":605},"color:#E2931D;--shiki-dark:#FFCB6B",[607],{"type":202,"value":557},{"type":197,"tag":272,"props":609,"children":610},{"style":296},[611],{"type":202,"value":612},"[] ",{"type":197,"tag":272,"props":614,"children":615},{"style":302},[616],{"type":202,"value":516},{"type":197,"tag":272,"props":618,"children":619},{"style":296},[620],{"type":202,"value":326},{"type":202,"value":307},{"type":197,"tag":272,"props":623,"children":624},{"class":274,"style":275},[625],{"type":197,"tag":272,"props":626,"children":627},{"style":302},[628],{"type":202,"value":629},"  {",{"type":202,"value":307},{"type":197,"tag":272,"props":632,"children":633},{"class":274,"style":275},[634,639,643,647,652,656],{"type":197,"tag":272,"props":635,"children":636},{"style":313},[637],{"type":202,"value":638},"    id",{"type":197,"tag":272,"props":640,"children":641},{"style":302},[642],{"type":202,"value":321},{"type":197,"tag":272,"props":644,"children":645},{"style":302},[646],{"type":202,"value":387},{"type":197,"tag":272,"props":648,"children":649},{"style":334},[650],{"type":202,"value":651},"lake",{"type":197,"tag":272,"props":653,"children":654},{"style":302},[655],{"type":202,"value":331},{"type":197,"tag":272,"props":657,"children":658},{"style":302},[659],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":662,"children":663},{"class":274,"style":275},[664,669,673,677,682,686],{"type":197,"tag":272,"props":665,"children":666},{"style":313},[667],{"type":202,"value":668},"    src",{"type":197,"tag":272,"props":670,"children":671},{"style":302},[672],{"type":202,"value":321},{"type":197,"tag":272,"props":674,"children":675},{"style":302},[676],{"type":202,"value":387},{"type":197,"tag":272,"props":678,"children":679},{"style":334},[680],{"type":202,"value":681},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1018\u002F1280\u002F800",{"type":197,"tag":272,"props":683,"children":684},{"style":302},[685],{"type":202,"value":331},{"type":197,"tag":272,"props":687,"children":688},{"style":302},[689],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":692,"children":693},{"class":274,"style":275},[694,699,703,709],{"type":197,"tag":272,"props":695,"children":696},{"style":313},[697],{"type":202,"value":698},"    width",{"type":197,"tag":272,"props":700,"children":701},{"style":302},[702],{"type":202,"value":321},{"type":197,"tag":272,"props":704,"children":706},{"style":705},"color:#F76D47;--shiki-dark:#F78C6C",[707],{"type":202,"value":708}," 1280",{"type":197,"tag":272,"props":710,"children":711},{"style":302},[712],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":715,"children":716},{"class":274,"style":275},[717,722,726,731],{"type":197,"tag":272,"props":718,"children":719},{"style":313},[720],{"type":202,"value":721},"    height",{"type":197,"tag":272,"props":723,"children":724},{"style":302},[725],{"type":202,"value":321},{"type":197,"tag":272,"props":727,"children":728},{"style":705},[729],{"type":202,"value":730}," 800",{"type":197,"tag":272,"props":732,"children":733},{"style":302},[734],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":737,"children":738},{"class":274,"style":275},[739,744,748,752,757,761],{"type":197,"tag":272,"props":740,"children":741},{"style":313},[742],{"type":202,"value":743},"    alt",{"type":197,"tag":272,"props":745,"children":746},{"style":302},[747],{"type":202,"value":321},{"type":197,"tag":272,"props":749,"children":750},{"style":302},[751],{"type":202,"value":387},{"type":197,"tag":272,"props":753,"children":754},{"style":334},[755],{"type":202,"value":756},"Mountain lake under a clear sky",{"type":197,"tag":272,"props":758,"children":759},{"style":302},[760],{"type":202,"value":331},{"type":197,"tag":272,"props":762,"children":763},{"style":302},[764],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":767,"children":768},{"class":274,"style":275},[769,774,778,782,787,791],{"type":197,"tag":272,"props":770,"children":771},{"style":313},[772],{"type":202,"value":773},"    caption",{"type":197,"tag":272,"props":775,"children":776},{"style":302},[777],{"type":202,"value":321},{"type":197,"tag":272,"props":779,"children":780},{"style":302},[781],{"type":202,"value":387},{"type":197,"tag":272,"props":783,"children":784},{"style":334},[785],{"type":202,"value":786},"Lake",{"type":197,"tag":272,"props":788,"children":789},{"style":302},[790],{"type":202,"value":331},{"type":197,"tag":272,"props":792,"children":793},{"style":302},[794],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":797,"children":798},{"class":274,"style":275},[799],{"type":197,"tag":272,"props":800,"children":801},{"style":302},[802],{"type":202,"value":409},{"type":202,"value":307},{"type":197,"tag":272,"props":805,"children":806},{"class":274,"style":275},[807],{"type":197,"tag":272,"props":808,"children":809},{"style":302},[810],{"type":202,"value":629},{"type":202,"value":307},{"type":197,"tag":272,"props":813,"children":814},{"class":274,"style":275},[815,819,823,827,832,836],{"type":197,"tag":272,"props":816,"children":817},{"style":313},[818],{"type":202,"value":638},{"type":197,"tag":272,"props":820,"children":821},{"style":302},[822],{"type":202,"value":321},{"type":197,"tag":272,"props":824,"children":825},{"style":302},[826],{"type":202,"value":387},{"type":197,"tag":272,"props":828,"children":829},{"style":334},[830],{"type":202,"value":831},"forest",{"type":197,"tag":272,"props":833,"children":834},{"style":302},[835],{"type":202,"value":331},{"type":197,"tag":272,"props":837,"children":838},{"style":302},[839],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":842,"children":843},{"class":274,"style":275},[844,848,852,856,861,865],{"type":197,"tag":272,"props":845,"children":846},{"style":313},[847],{"type":202,"value":668},{"type":197,"tag":272,"props":849,"children":850},{"style":302},[851],{"type":202,"value":321},{"type":197,"tag":272,"props":853,"children":854},{"style":302},[855],{"type":202,"value":387},{"type":197,"tag":272,"props":857,"children":858},{"style":334},[859],{"type":202,"value":860},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F960\u002F1200",{"type":197,"tag":272,"props":862,"children":863},{"style":302},[864],{"type":202,"value":331},{"type":197,"tag":272,"props":866,"children":867},{"style":302},[868],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":871,"children":872},{"class":274,"style":275},[873,877,881,886],{"type":197,"tag":272,"props":874,"children":875},{"style":313},[876],{"type":202,"value":698},{"type":197,"tag":272,"props":878,"children":879},{"style":302},[880],{"type":202,"value":321},{"type":197,"tag":272,"props":882,"children":883},{"style":705},[884],{"type":202,"value":885}," 960",{"type":197,"tag":272,"props":887,"children":888},{"style":302},[889],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":892,"children":893},{"class":274,"style":275},[894,898,902,907],{"type":197,"tag":272,"props":895,"children":896},{"style":313},[897],{"type":202,"value":721},{"type":197,"tag":272,"props":899,"children":900},{"style":302},[901],{"type":202,"value":321},{"type":197,"tag":272,"props":903,"children":904},{"style":705},[905],{"type":202,"value":906}," 1200",{"type":197,"tag":272,"props":908,"children":909},{"style":302},[910],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":913,"children":914},{"class":274,"style":275},[915,919,923,927,932,936],{"type":197,"tag":272,"props":916,"children":917},{"style":313},[918],{"type":202,"value":743},{"type":197,"tag":272,"props":920,"children":921},{"style":302},[922],{"type":202,"value":321},{"type":197,"tag":272,"props":924,"children":925},{"style":302},[926],{"type":202,"value":387},{"type":197,"tag":272,"props":928,"children":929},{"style":334},[930],{"type":202,"value":931},"River running through a valley",{"type":197,"tag":272,"props":933,"children":934},{"style":302},[935],{"type":202,"value":331},{"type":197,"tag":272,"props":937,"children":938},{"style":302},[939],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":942,"children":943},{"class":274,"style":275},[944,948,952,956,961,965],{"type":197,"tag":272,"props":945,"children":946},{"style":313},[947],{"type":202,"value":773},{"type":197,"tag":272,"props":949,"children":950},{"style":302},[951],{"type":202,"value":321},{"type":197,"tag":272,"props":953,"children":954},{"style":302},[955],{"type":202,"value":387},{"type":197,"tag":272,"props":957,"children":958},{"style":334},[959],{"type":202,"value":960},"Valley",{"type":197,"tag":272,"props":962,"children":963},{"style":302},[964],{"type":202,"value":331},{"type":197,"tag":272,"props":966,"children":967},{"style":302},[968],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":971,"children":972},{"class":274,"style":275},[973],{"type":197,"tag":272,"props":974,"children":975},{"style":302},[976],{"type":202,"value":409},{"type":202,"value":307},{"type":197,"tag":272,"props":979,"children":980},{"class":274,"style":275},[981],{"type":197,"tag":272,"props":982,"children":983},{"style":302},[984],{"type":202,"value":629},{"type":202,"value":307},{"type":197,"tag":272,"props":987,"children":988},{"class":274,"style":275},[989,993,997,1001,1006,1010],{"type":197,"tag":272,"props":990,"children":991},{"style":313},[992],{"type":202,"value":638},{"type":197,"tag":272,"props":994,"children":995},{"style":302},[996],{"type":202,"value":321},{"type":197,"tag":272,"props":998,"children":999},{"style":302},[1000],{"type":202,"value":387},{"type":197,"tag":272,"props":1002,"children":1003},{"style":334},[1004],{"type":202,"value":1005},"coast",{"type":197,"tag":272,"props":1007,"children":1008},{"style":302},[1009],{"type":202,"value":331},{"type":197,"tag":272,"props":1011,"children":1012},{"style":302},[1013],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1016,"children":1017},{"class":274,"style":275},[1018,1022,1026,1030,1035,1039],{"type":197,"tag":272,"props":1019,"children":1020},{"style":313},[1021],{"type":202,"value":668},{"type":197,"tag":272,"props":1023,"children":1024},{"style":302},[1025],{"type":202,"value":321},{"type":197,"tag":272,"props":1027,"children":1028},{"style":302},[1029],{"type":202,"value":387},{"type":197,"tag":272,"props":1031,"children":1032},{"style":334},[1033],{"type":202,"value":1034},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1020\u002F1200\u002F800",{"type":197,"tag":272,"props":1036,"children":1037},{"style":302},[1038],{"type":202,"value":331},{"type":197,"tag":272,"props":1040,"children":1041},{"style":302},[1042],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1045,"children":1046},{"class":274,"style":275},[1047,1051,1055,1059],{"type":197,"tag":272,"props":1048,"children":1049},{"style":313},[1050],{"type":202,"value":698},{"type":197,"tag":272,"props":1052,"children":1053},{"style":302},[1054],{"type":202,"value":321},{"type":197,"tag":272,"props":1056,"children":1057},{"style":705},[1058],{"type":202,"value":906},{"type":197,"tag":272,"props":1060,"children":1061},{"style":302},[1062],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1065,"children":1066},{"class":274,"style":275},[1067,1071,1075,1079],{"type":197,"tag":272,"props":1068,"children":1069},{"style":313},[1070],{"type":202,"value":721},{"type":197,"tag":272,"props":1072,"children":1073},{"style":302},[1074],{"type":202,"value":321},{"type":197,"tag":272,"props":1076,"children":1077},{"style":705},[1078],{"type":202,"value":730},{"type":197,"tag":272,"props":1080,"children":1081},{"style":302},[1082],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1085,"children":1086},{"class":274,"style":275},[1087,1091,1095,1099,1104,1108],{"type":197,"tag":272,"props":1088,"children":1089},{"style":313},[1090],{"type":202,"value":743},{"type":197,"tag":272,"props":1092,"children":1093},{"style":302},[1094],{"type":202,"value":321},{"type":197,"tag":272,"props":1096,"children":1097},{"style":302},[1098],{"type":202,"value":387},{"type":197,"tag":272,"props":1100,"children":1101},{"style":334},[1102],{"type":202,"value":1103},"Bear walking along a stony shore",{"type":197,"tag":272,"props":1105,"children":1106},{"style":302},[1107],{"type":202,"value":331},{"type":197,"tag":272,"props":1109,"children":1110},{"style":302},[1111],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1114,"children":1115},{"class":274,"style":275},[1116,1120,1124,1128,1133,1137],{"type":197,"tag":272,"props":1117,"children":1118},{"style":313},[1119],{"type":202,"value":773},{"type":197,"tag":272,"props":1121,"children":1122},{"style":302},[1123],{"type":202,"value":321},{"type":197,"tag":272,"props":1125,"children":1126},{"style":302},[1127],{"type":202,"value":387},{"type":197,"tag":272,"props":1129,"children":1130},{"style":334},[1131],{"type":202,"value":1132},"Shore",{"type":197,"tag":272,"props":1134,"children":1135},{"style":302},[1136],{"type":202,"value":331},{"type":197,"tag":272,"props":1138,"children":1139},{"style":302},[1140],{"type":202,"value":351},{"type":202,"value":307},{"type":197,"tag":272,"props":1143,"children":1144},{"class":274,"style":275},[1145],{"type":197,"tag":272,"props":1146,"children":1147},{"style":302},[1148],{"type":202,"value":409},{"type":202,"value":307},{"type":197,"tag":272,"props":1151,"children":1152},{"class":274,"style":275},[1153],{"type":197,"tag":272,"props":1154,"children":1155},{"style":296},[1156],{"type":202,"value":346},{"type":202,"value":307},{"type":197,"tag":272,"props":1159,"children":1160},{"class":274,"style":275},[1161,1166,1170],{"type":197,"tag":272,"props":1162,"children":1163},{"style":302},[1164],{"type":202,"value":1165},"\u003C\u002F",{"type":197,"tag":272,"props":1167,"children":1168},{"style":313},[1169],{"type":202,"value":500},{"type":197,"tag":272,"props":1171,"children":1172},{"style":302},[1173],{"type":202,"value":534},{"type":202,"value":307},{"type":197,"tag":272,"props":1176,"children":1177},{"class":274,"style":275},[],{"type":202,"value":307},{"type":197,"tag":272,"props":1180,"children":1181},{"class":274,"style":275},[1182,1186,1191],{"type":197,"tag":272,"props":1183,"children":1184},{"style":302},[1185],{"type":202,"value":495},{"type":197,"tag":272,"props":1187,"children":1188},{"style":313},[1189],{"type":202,"value":1190},"template",{"type":197,"tag":272,"props":1192,"children":1193},{"style":302},[1194],{"type":202,"value":534},{"type":202,"value":307},{"type":197,"tag":272,"props":1197,"children":1198},{"class":274,"style":275},[1199,1204,1208,1213,1218,1222,1226,1230,1234],{"type":197,"tag":272,"props":1200,"children":1201},{"style":302},[1202],{"type":202,"value":1203},"  \u003C",{"type":197,"tag":272,"props":1205,"children":1206},{"style":313},[1207],{"type":202,"value":123},{"type":197,"tag":272,"props":1209,"children":1210},{"style":302},[1211],{"type":202,"value":1212}," :",{"type":197,"tag":272,"props":1214,"children":1215},{"style":503},[1216],{"type":202,"value":1217},"photos",{"type":197,"tag":272,"props":1219,"children":1220},{"style":302},[1221],{"type":202,"value":516},{"type":197,"tag":272,"props":1223,"children":1224},{"style":302},[1225],{"type":202,"value":521},{"type":197,"tag":272,"props":1227,"children":1228},{"style":296},[1229],{"type":202,"value":1217},{"type":197,"tag":272,"props":1231,"children":1232},{"style":302},[1233],{"type":202,"value":521},{"type":197,"tag":272,"props":1235,"children":1236},{"style":302},[1237],{"type":202,"value":1238}," \u002F>",{"type":202,"value":307},{"type":197,"tag":272,"props":1241,"children":1242},{"class":274,"style":275},[1243,1247,1251],{"type":197,"tag":272,"props":1244,"children":1245},{"style":302},[1246],{"type":202,"value":1165},{"type":197,"tag":272,"props":1248,"children":1249},{"style":313},[1250],{"type":202,"value":1190},{"type":197,"tag":272,"props":1252,"children":1253},{"style":302},[1254],{"type":202,"value":534},{"type":197,"tag":198,"props":1256,"children":1257},{},[1258],{"type":202,"value":1259},"The sample URLs contain their sizes, so the page works before you add files.",{"type":197,"tag":248,"props":1261,"children":1263},{"id":1262},"_3-check-the-result",[1264],{"type":202,"value":1265},"3. Check the result",{"type":197,"tag":198,"props":1267,"children":1268},{},[1269,1271,1276],{"type":202,"value":1270},"Start the dev server and open ",{"type":197,"tag":213,"props":1272,"children":1273},{},[1274],{"type":202,"value":1275},"\u002Fgallery",{"type":202,"value":321},{"type":197,"tag":1278,"props":1279,"children":1280},"ul",{},[1281,1287,1292,1308],{"type":197,"tag":1282,"props":1283,"children":1284},"li",{},[1285],{"type":202,"value":1286},"The three photos fill the width in justified rows, with no jump while they load.",{"type":197,"tag":1282,"props":1288,"children":1289},{},[1290],{"type":202,"value":1291},"Selecting a photo opens the lightbox from the thumbnail.",{"type":197,"tag":1282,"props":1293,"children":1294},{},[1295,1300,1301,1306],{"type":197,"tag":213,"props":1296,"children":1297},{},[1298],{"type":202,"value":1299},"ArrowLeft",{"type":202,"value":458},{"type":197,"tag":213,"props":1302,"children":1303},{},[1304],{"type":202,"value":1305},"ArrowRight",{"type":202,"value":1307}," change the photo; a click zooms to real pixels.",{"type":197,"tag":1282,"props":1309,"children":1310},{},[1311,1316],{"type":197,"tag":213,"props":1312,"children":1313},{},[1314],{"type":202,"value":1315},"Escape",{"type":202,"value":1317}," closes the lightbox and focus returns to the thumbnail.",{"type":197,"tag":248,"props":1319,"children":1321},{"id":1320},"_4-use-your-own-photos",[1322],{"type":202,"value":1323},"4. Use your own photos",{"type":197,"tag":198,"props":1325,"children":1326},{},[1327],{"type":202,"value":1328},"Replace the array with your data. Each photo needs:",{"type":197,"tag":1330,"props":1331,"children":1332},"table",{},[1333,1352],{"type":197,"tag":1334,"props":1335,"children":1336},"thead",{},[1337],{"type":197,"tag":1338,"props":1339,"children":1340},"tr",{},[1341,1347],{"type":197,"tag":1342,"props":1343,"children":1344},"th",{},[1345],{"type":202,"value":1346},"Field",{"type":197,"tag":1342,"props":1348,"children":1349},{},[1350],{"type":202,"value":1351},"Rule",{"type":197,"tag":1353,"props":1354,"children":1355},"tbody",{},[1356,1373,1389,1405],{"type":197,"tag":1338,"props":1357,"children":1358},{},[1359,1368],{"type":197,"tag":1360,"props":1361,"children":1362},"td",{},[1363],{"type":197,"tag":213,"props":1364,"children":1365},{},[1366],{"type":202,"value":1367},"id",{"type":197,"tag":1360,"props":1369,"children":1370},{},[1371],{"type":202,"value":1372},"Stable and unique in the collection. Not the array index.",{"type":197,"tag":1338,"props":1374,"children":1375},{},[1376,1384],{"type":197,"tag":1360,"props":1377,"children":1378},{},[1379],{"type":197,"tag":213,"props":1380,"children":1381},{},[1382],{"type":202,"value":1383},"src",{"type":197,"tag":1360,"props":1385,"children":1386},{},[1387],{"type":202,"value":1388},"Image URL or public path.",{"type":197,"tag":1338,"props":1390,"children":1391},{},[1392,1400],{"type":197,"tag":1360,"props":1393,"children":1394},{},[1395],{"type":197,"tag":213,"props":1396,"children":1397},{},[1398],{"type":202,"value":1399},"width",{"type":197,"tag":1360,"props":1401,"children":1402},{},[1403],{"type":202,"value":1404},"Real pixel width of the image file, not its displayed size.",{"type":197,"tag":1338,"props":1406,"children":1407},{},[1408,1416],{"type":197,"tag":1360,"props":1409,"children":1410},{},[1411],{"type":197,"tag":213,"props":1412,"children":1413},{},[1414],{"type":202,"value":1415},"height",{"type":197,"tag":1360,"props":1417,"children":1418},{},[1419],{"type":202,"value":1420},"Real pixel height of the image file.",{"type":197,"tag":198,"props":1422,"children":1423},{},[1424,1426,1431,1433,1438,1439,1444],{"type":202,"value":1425},"Add ",{"type":197,"tag":213,"props":1427,"children":1428},{},[1429],{"type":202,"value":1430},"alt",{"type":202,"value":1432}," for every image that is not decorative. ",{"type":197,"tag":213,"props":1434,"children":1435},{},[1436],{"type":202,"value":1437},"caption",{"type":202,"value":458},{"type":197,"tag":213,"props":1440,"children":1441},{},[1442],{"type":202,"value":1443},"description",{"type":202,"value":1445},"\nappear in the lightbox.",{"type":197,"tag":205,"props":1447,"children":1449},{"$":1448},{"component":208,"block":208},[1450,1452,1456,1457,1461],{"type":202,"value":1451},"Wrong ",{"type":197,"tag":213,"props":1453,"children":1454},{},[1455],{"type":202,"value":1399},{"type":202,"value":239},{"type":197,"tag":213,"props":1458,"children":1459},{},[1460],{"type":202,"value":1415},{"type":202,"value":1462}," values still render, but the layout and the opening\nanimation are wrong. Read the sizes from the file, your CMS, or your upload\npipeline.",{"type":197,"tag":198,"props":1464,"children":1465},{},[1466,1468,1473,1475,1479],{"type":202,"value":1467},"Data from a CMS or an API: ",{"type":197,"tag":1469,"props":1470,"children":1471},"a",{"href":59},[1472],{"type":202,"value":56},{"type":202,"value":1474},".\nResized and modern image formats: ",{"type":197,"tag":1469,"props":1476,"children":1477},{"href":79},[1478],{"type":202,"value":76},{"type":202,"value":246},{"type":197,"tag":198,"props":1481,"children":1482},{},[1483,1485,1491],{"type":202,"value":1484},"Questions? Ask in the ",{"type":197,"tag":1469,"props":1486,"children":1488},{"href":1487},"https:\u002F\u002Fdiscord.lupinum.com",[1489],{"type":202,"value":1490},"Lupinum OSS Discord",{"type":202,"value":246},{"title":1493,"searchDepth":1494,"depth":1494,"links":1495},"",4,[1496,1498,1499,1500],{"id":250,"depth":1497,"text":253},2,{"id":475,"depth":1497,"text":478},{"id":1262,"depth":1497,"text":1265},{"id":1320,"depth":1497,"text":1323},"markdown","docs",{"source":1504,"path":1505,"stem":1506,"dir":1507,"extension":1508},"content","docs\u002F1.start\u002F2.get-started.md","docs\u002F1.start\u002F2.get-started","start","md",{"requestedPath":23,"resolvedPath":23,"alternates":1510},[],{"requested":1512,"resolved":1513,"usedFallback":6},{},{"locale":8},{"previous":1515,"next":1517},{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":1516,"path":18},{"title":14},{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},{"left":1519,"top":1519,"width":1520,"height":1521,"rotate":1519,"vFlip":6,"hFlip":6,"body":1522},0,256,221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":1519,"top":1519,"width":1524,"height":1524,"rotate":1519,"vFlip":6,"hFlip":6,"body":1525},24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",{"left":1519,"top":1519,"width":1520,"height":1527,"rotate":1519,"vFlip":6,"hFlip":6,"body":1528},168,"\u003Cpath fill=\"#00dc82\" d=\"M143.618 167.029h95.166c3.023 0 5.992-.771 8.61-2.237a16.96 16.96 0 0 0 6.302-6.115a16.3 16.3 0 0 0 2.304-8.352c0-2.932-.799-5.811-2.312-8.35L189.778 34.6a16.97 16.97 0 0 0-6.301-6.113a17.6 17.6 0 0 0-8.608-2.238c-3.023 0-5.991.772-8.609 2.238a16.96 16.96 0 0 0-6.3 6.113l-16.342 27.473l-31.95-53.724a17 17 0 0 0-6.304-6.112A17.64 17.64 0 0 0 96.754 0c-3.022 0-5.992.772-8.61 2.237a17 17 0 0 0-6.303 6.112L2.31 141.975a16.3 16.3 0 0 0-2.31 8.35c0 2.932.793 5.813 2.304 8.352a16.96 16.96 0 0 0 6.302 6.115a17.6 17.6 0 0 0 8.61 2.237h59.737c23.669 0 41.123-10.084 53.134-29.758l29.159-48.983l15.618-26.215l46.874 78.742h-62.492zm-67.64-26.24l-41.688-.01L96.782 35.796l31.181 52.492l-20.877 35.084c-7.976 12.765-17.037 17.416-31.107 17.416\"\u002F>",1791310382091]