Custom Components

Lightbox Gallery

{"@webstudio/instance/v0.1":{"instanceSelector":["29ntbKfe9RY4efkArw8Lh","1RzjyyXzr58BZxqfvvdm7","ljWN4Tq5kLVgE7XnvlLNH","-CUv3d4vDe-ycfItJZCba"],"children":[{"type":"id","value":"29ntbKfe9RY4efkArw8Lh"}],"instances":[{"type":"instance","id":"29ntbKfe9RY4efkArw8Lh","component":"Box","label":"Lightbox Gallery Component","children":[{"type":"id","value":"gxzcF_EagE2d_XlN0tbbD"},{"type":"id","value":"TRu2tcrHtjMfnSE-ym5N5"},{"type":"id","value":"9j_q4QX0xmDXnsBB7iCWA"}]},{"type":"instance","id":"gxzcF_EagE2d_XlN0tbbD","component":"HtmlEmbed","label":"CSS","children":[]},{"type":"instance","id":"TRu2tcrHtjMfnSE-ym5N5","component":"Box","label":"Images Wrapper","children":[{"type":"id","value":"9ME_HNJTznuI1fh1alkI9"},{"type":"id","value":"nEpnPx9k3MOuUDsaQgqQE"}]},{"type":"instance","id":"9ME_HNJTznuI1fh1alkI9","component":"Box","label":"Gallery","children":[{"type":"id","value":"U_DrMumgF4mbjHUcMx3zg"}]},{"type":"instance","id":"U_DrMumgF4mbjHUcMx3zg","component":"ws:collection","children":[{"type":"id","value":"iGyDVgVvHCr0J3XT1JOJm"}]},{"type":"instance","id":"iGyDVgVvHCr0J3XT1JOJm","component":"Box","label":"Collection Item","children":[{"type":"id","value":"6_lOxwkynQJK-rRNmSuoE"}]},{"type":"instance","id":"6_lOxwkynQJK-rRNmSuoE","component":"Box","label":"Image Wrapper","children":[{"type":"id","value":"Y79K4GEFvpK7EuqDSK9B2"}]},{"type":"instance","id":"Y79K4GEFvpK7EuqDSK9B2","component":"Image","children":[]},{"type":"instance","id":"nEpnPx9k3MOuUDsaQgqQE","component":"Box","label":"Lightbox","children":[{"type":"id","value":"odUYzEbgCbhi6krjMSUX7"},{"type":"id","value":"km9l7HQHvzvFRxSkRZe_V"},{"type":"id","value":"0dkcsb93YuJxqFQVbcNMd"},{"type":"id","value":"vdxXRxygUWzbi3_1xbEQV"}]},{"type":"instance","id":"odUYzEbgCbhi6krjMSUX7","component":"Button","label":"Close Button","children":[{"type":"id","value":"eaiZjleYeB5WVidhPZ-fc"}]},{"type":"instance","id":"eaiZjleYeB5WVidhPZ-fc","component":"HtmlEmbed","children":[]},{"type":"instance","id":"km9l7HQHvzvFRxSkRZe_V","component":"Box","label":"Prev","children":[{"type":"id","value":"AliolIfKCcbH3ZIpxKXB8"}]},{"type":"instance","id":"AliolIfKCcbH3ZIpxKXB8","component":"Button","label":"Prev Button","children":[{"type":"id","value":"LA-F7jV4fU4IvhJ3iBh_h"}]},{"type":"instance","id":"LA-F7jV4fU4IvhJ3iBh_h","component":"HtmlEmbed","children":[]},{"type":"instance","id":"0dkcsb93YuJxqFQVbcNMd","component":"Box","label":"Next","children":[{"type":"id","value":"U91RQbb3MRjNv5zq1IEZm"}]},{"type":"instance","id":"U91RQbb3MRjNv5zq1IEZm","component":"Button","label":"Next Button","children":[{"type":"id","value":"hALCxXABSELe-Dvmbowq9"}]},{"type":"instance","id":"hALCxXABSELe-Dvmbowq9","component":"HtmlEmbed","children":[]},{"type":"instance","id":"vdxXRxygUWzbi3_1xbEQV","component":"Box","label":"Lightbox Content","children":[{"type":"id","value":"2Ke9hy34iASOc2hrElck-"},{"type":"id","value":"44Cr0xOvTf_UCkmau8qvh"}]},{"type":"instance","id":"2Ke9hy34iASOc2hrElck-","component":"Box","label":"Image Wrapper","children":[{"type":"id","value":"D85IA7JLC9ezRXIsqDete"}]},{"type":"instance","id":"D85IA7JLC9ezRXIsqDete","component":"Image","children":[]},{"type":"instance","id":"44Cr0xOvTf_UCkmau8qvh","component":"Box","label":"Caption","children":[{"type":"id","value":"r3VJ7W8d_vhFrVXOcJ2MV"}]},{"type":"instance","id":"r3VJ7W8d_vhFrVXOcJ2MV","component":"Text","children":[{"type":"text","value":"The text you can edit","placeholder":true}]},{"type":"instance","id":"9j_q4QX0xmDXnsBB7iCWA","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"TRu2tcrHtjMfnSE-ym5N5","values":[]},{"instanceId":"9ME_HNJTznuI1fh1alkI9","values":["X9ydFthkrE5Zeyj4km03E","PmiEu7CyXYNecmmMqvIZk"]},{"instanceId":"iGyDVgVvHCr0J3XT1JOJm","values":["ecQFyB7ySZ4KE9g9xt_vf"]},{"instanceId":"6_lOxwkynQJK-rRNmSuoE","values":["7IDEFAwjhRpEY9AbIwzM0"]},{"instanceId":"Y79K4GEFvpK7EuqDSK9B2","values":["qOPxdTxd-pymvrEouzR2S"]},{"instanceId":"nEpnPx9k3MOuUDsaQgqQE","values":["cnasZML9kcOAelGfavLLe"]},{"instanceId":"odUYzEbgCbhi6krjMSUX7","values":["On8A_xOXuDFUIdPR-ymrt"]},{"instanceId":"km9l7HQHvzvFRxSkRZe_V","values":["Ly2hMIO1MxH06b0dCm7L_"]},{"instanceId":"AliolIfKCcbH3ZIpxKXB8","values":["xgeJgJYanq8tKVP3wDwz5"]},{"instanceId":"0dkcsb93YuJxqFQVbcNMd","values":["UcO4g2YpWA1n8YxDmpSOw"]},{"instanceId":"U91RQbb3MRjNv5zq1IEZm","values":["0QLygoUkgCW2152uyxcJp"]},{"instanceId":"vdxXRxygUWzbi3_1xbEQV","values":["9ql0nIM4-2xFt2hFLZC-k"]},{"instanceId":"2Ke9hy34iASOc2hrElck-","values":["dTWnNcWK28vM4tCkxzG86"]},{"instanceId":"D85IA7JLC9ezRXIsqDete","values":["f1P3_t93mww2iDx_5bNNG"]},{"instanceId":"44Cr0xOvTf_UCkmau8qvh","values":["bzmvpVsVX_RgHlqpLnFc-"]}],"styleSources":[{"type":"token","id":"X9ydFthkrE5Zeyj4km03E","name":"grid"},{"type":"local","id":"PmiEu7CyXYNecmmMqvIZk"},{"type":"local","id":"ecQFyB7ySZ4KE9g9xt_vf"},{"type":"local","id":"7IDEFAwjhRpEY9AbIwzM0"},{"type":"local","id":"qOPxdTxd-pymvrEouzR2S"},{"type":"local","id":"cnasZML9kcOAelGfavLLe"},{"type":"local","id":"On8A_xOXuDFUIdPR-ymrt"},{"type":"local","id":"Ly2hMIO1MxH06b0dCm7L_"},{"type":"local","id":"xgeJgJYanq8tKVP3wDwz5"},{"type":"local","id":"UcO4g2YpWA1n8YxDmpSOw"},{"type":"local","id":"0QLygoUkgCW2152uyxcJp"},{"type":"local","id":"9ql0nIM4-2xFt2hFLZC-k"},{"type":"local","id":"dTWnNcWK28vM4tCkxzG86"},{"type":"local","id":"f1P3_t93mww2iDx_5bNNG"},{"type":"local","id":"bzmvpVsVX_RgHlqpLnFc-"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"},{"id":"qxIYG2RGU7o4XhDPQIKfd","label":"Mobile landscape","maxWidth":767}],"styles":[{"styleSourceId":"X9ydFthkrE5Zeyj4km03E","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"display","value":{"type":"keyword","value":"grid"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"X9ydFthkrE5Zeyj4km03E","property":"rowGap","value":{"type":"unit","unit":"rem","value":0},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"X9ydFthkrE5Zeyj4km03E","property":"gridTemplateColumns","value":{"type":"unparsed","value":"repeat(3, 1fr)"},"listed":true},{"styleSourceId":"X9ydFthkrE5Zeyj4km03E","breakpointId":"qxIYG2RGU7o4XhDPQIKfd","property":"display","value":{"type":"keyword","value":"flex"}},{"styleSourceId":"X9ydFthkrE5Zeyj4km03E","breakpointId":"qxIYG2RGU7o4XhDPQIKfd","property":"flexDirection","value":{"type":"keyword","value":"column"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"X9ydFthkrE5Zeyj4km03E","property":"columnGap","value":{"type":"unit","unit":"rem","value":0},"listed":true},{"styleSourceId":"PmiEu7CyXYNecmmMqvIZk","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"gridTemplateColumns","value":{"type":"unparsed","value":"repeat(3, 1fr)"},"listed":true},{"styleSourceId":"PmiEu7CyXYNecmmMqvIZk","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"maxWidth","value":{"type":"unit","unit":"rem","value":50}},{"styleSourceId":"PmiEu7CyXYNecmmMqvIZk","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"rowGap","value":{"type":"unit","unit":"rem","value":1},"listed":true},{"styleSourceId":"PmiEu7CyXYNecmmMqvIZk","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"columnGap","value":{"type":"unit","unit":"rem","value":1},"listed":true},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"aspectRatio","value":{"type":"var","value":"ratio-widescreen"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderTopStyle","value":{"type":"keyword","value":"solid"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderRightStyle","value":{"type":"keyword","value":"solid"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderLeftStyle","value":{"type":"keyword","value":"solid"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderBottomStyle","value":{"type":"keyword","value":"solid"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderTopColor","value":{"type":"var","value":"foreground-border"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderRightColor","value":{"type":"var","value":"foreground-border"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderBottomColor","value":{"type":"var","value":"foreground-border"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderLeftColor","value":{"type":"var","value":"foreground-border"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderTopLeftRadius","value":{"type":"unit","unit":"px","value":4}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderTopRightRadius","value":{"type":"unit","unit":"px","value":4}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderBottomLeftRadius","value":{"type":"unit","unit":"px","value":4}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"borderBottomRightRadius","value":{"type":"unit","unit":"px","value":4}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"styleSourceId":"7IDEFAwjhRpEY9AbIwzM0","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"styleSourceId":"qOPxdTxd-pymvrEouzR2S","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"width","value":{"type":"unit","unit":"%","value":100}},{"styleSourceId":"qOPxdTxd-pymvrEouzR2S","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"height","value":{"type":"unit","unit":"%","value":100}},{"styleSourceId":"qOPxdTxd-pymvrEouzR2S","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"objectFit","value":{"type":"keyword","value":"cover"}},{"styleSourceId":"ecQFyB7ySZ4KE9g9xt_vf","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"styleSourceId":"ecQFyB7ySZ4KE9g9xt_vf","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"styleSourceId":"ecQFyB7ySZ4KE9g9xt_vf","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"cursor","value":{"type":"keyword","value":"pointer"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"position","value":{"type":"keyword","value":"relative"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"width","value":{"type":"unit","unit":"%","value":90}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"height","value":{"type":"unit","unit":"%","value":90}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"position","value":{"type":"keyword","value":"fixed"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"left","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"top","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"zIndex","value":{"type":"unit","unit":"number","value":1000}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"backgroundColor","value":{"type":"rgb","r":0,"g":0,"b":0,"alpha":0.5}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"transitionProperty","value":{"type":"layers","value":[{"type":"unparsed","value":"opacity"}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"transitionDuration","value":{"type":"layers","value":[{"type":"unit","unit":"s","value":0.3}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"transitionTimingFunction","value":{"type":"layers","value":[{"type":"keyword","value":"ease-out"}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"transitionDelay","value":{"type":"layers","value":[{"type":"unit","unit":"s","value":0}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"transitionBehavior","value":{"type":"layers","value":[{"type":"keyword","value":"normal"}]},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"overflowX","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"overflowY","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"top","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"right","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"bottom","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"left","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"maxHeight","value":{"type":"unit","unit":"vh","value":80}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"marginRight","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"marginLeft","value":{"type":"keyword","value":"auto"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"aspectRatio","value":{"type":"unparsed","value":"16 / 9"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"overflowX","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"overflowY","value":{"type":"keyword","value":"hidden"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"height","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"f1P3_t93mww2iDx_5bNNG","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"f1P3_t93mww2iDx_5bNNG","property":"height","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"f1P3_t93mww2iDx_5bNNG","property":"objectFit","value":{"type":"keyword","value":"cover"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"width","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"height","value":{"type":"unit","unit":"%","value":100}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"display","value":{"type":"keyword","value":"inline-flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"paddingTop","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"paddingRight","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"paddingBottom","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"paddingLeft","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"position","value":{"type":"keyword","value":"absolute"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"top","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"right","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"left","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"top","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"bottom","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"position","value":{"type":"keyword","value":"absolute"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"left","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"top","value":{"type":"unit","value":0,"unit":"px"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"bottom","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"justifyContent","value":{"type":"keyword","value":"start"}},{"styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"position","value":{"type":"keyword","value":"absolute"}},{"styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"top","value":{"type":"unit","unit":"px","value":0}},{"styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","breakpointId":"2AQJrSP7PN3cvLY9d2vK-","property":"bottom","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","property":"justifyContent","value":{"type":"keyword","value":"end"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"right","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"top","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"bottom","value":{"type":"unit","unit":"px","value":0}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","property":"right","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"zIndex","value":{"type":"unit","unit":"number","value":1002}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"display","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"paddingTop","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"paddingRight","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"paddingBottom","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"paddingLeft","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"backgroundColor","value":{"type":"keyword","value":"transparent"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"borderTopStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"borderRightStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"borderLeftStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"borderBottomStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"paddingLeft","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"paddingTop","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"paddingRight","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"paddingBottom","value":{"type":"unit","unit":"rem","value":0.25}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"backgroundColor","value":{"type":"keyword","value":"transparent"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"borderTopStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"borderRightStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"borderLeftStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"borderBottomStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"backgroundColor","value":{"type":"keyword","value":"transparent"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"borderTopStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"borderRightStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"borderLeftStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"borderBottomStyle","value":{"type":"keyword","value":"none"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"color","value":{"type":"keyword","value":"white"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"color","value":{"type":"keyword","value":"white"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"color","value":{"type":"keyword","value":"white"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"position","value":{"type":"keyword","value":"relative"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"display","value":{"type":"keyword","value":"flex"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"alignItems","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"justifyContent","value":{"type":"keyword","value":"center"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"paddingTop","value":{"type":"var","value":"size-6"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"color","value":{"type":"keyword","value":"white"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"cnasZML9kcOAelGfavLLe","property":"opacity","value":{"type":"unit","unit":"number","value":0},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderTopStyle","value":{"type":"keyword","value":"solid"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderRightStyle","value":{"type":"keyword","value":"solid"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderLeftStyle","value":{"type":"keyword","value":"solid"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderBottomStyle","value":{"type":"keyword","value":"solid"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderTopLeftRadius","value":{"type":"unit","unit":"px","value":4}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderTopRightRadius","value":{"type":"unit","unit":"px","value":4}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderBottomLeftRadius","value":{"type":"unit","unit":"px","value":4}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderBottomRightRadius","value":{"type":"unit","unit":"px","value":4}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderTopColor","value":{"type":"var","value":"foreground-border"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderRightColor","value":{"type":"var","value":"foreground-border"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderBottomColor","value":{"type":"var","value":"foreground-border"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"borderLeftColor","value":{"type":"var","value":"foreground-border"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"maxWidth","value":{"type":"var","value":"size-lg"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"On8A_xOXuDFUIdPR-ymrt","property":"cursor","value":{"type":"keyword","value":"pointer"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"xgeJgJYanq8tKVP3wDwz5","property":"cursor","value":{"type":"keyword","value":"pointer"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"0QLygoUkgCW2152uyxcJp","property":"cursor","value":{"type":"keyword","value":"pointer"},"listed":true},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UcO4g2YpWA1n8YxDmpSOw","property":"zIndex","value":{"type":"unit","unit":"number","value":1001}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"Ly2hMIO1MxH06b0dCm7L_","property":"zIndex","value":{"type":"unit","unit":"number","value":1001}},{"breakpointId":"qxIYG2RGU7o4XhDPQIKfd","styleSourceId":"dTWnNcWK28vM4tCkxzG86","property":"aspectRatio","value":{"type":"unparsed","value":"3 / 4"}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"paddingRight","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"9ql0nIM4-2xFt2hFLZC-k","property":"paddingLeft","value":{"type":"unit","unit":"rem","value":1}},{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"bzmvpVsVX_RgHlqpLnFc-","property":"textAlign","value":{"type":"keyword","value":"center"}}],"dataSources":[{"type":"parameter","id":"TECxliJblD2-5kDlvcd7G","scopeInstanceId":"U_DrMumgF4mbjHUcMx3zg","name":"collectionItem"}],"resources":[],"props":[{"id":"q44l-qNipDXG8aTJ-G2eb","instanceId":"9j_q4QX0xmDXnsBB7iCWA","name":"code","type":"string","value":"<script type=\"module\" src=\"https://drevo.b-cdn.net/Library/Custom%20Components/Lightbox%20Gallery/lightbox-gallery-v1.2.1.js\"></script>"},{"id":"ilkGqoK1P7LnNy4bxfa_E","instanceId":"gxzcF_EagE2d_XlN0tbbD","name":"code","type":"string","value":"<style>\n  [dv-lightbox=\"open\"] {\n            display: flex;\n            opacity: 1; /* Fade to full opacity when open */\n            justify-content: center;\n            align-items: center;\n        }\n</style>\n"},{"id":"3MVng2mW8AhRc9EKoVf2W","instanceId":"9j_q4QX0xmDXnsBB7iCWA","name":"clientOnly","type":"boolean","value":true},{"id":"dXjsJNHEwy0vpGX0DuKEK","instanceId":"9j_q4QX0xmDXnsBB7iCWA","name":"data-ws-show","type":"boolean","value":true},{"id":"PC-_6j7Mo6uuw-CZbbkKV","instanceId":"U_DrMumgF4mbjHUcMx3zg","name":"data","type":"json","value":[{"image":"https://images.unsplash.com/photo-1506744038136-46273834b3fb","alt":"A serene view of a river flowing through a mountainous landscape."},{"image":"https://images.unsplash.com/photo-1441974231531-c6227db76b6e","alt":"A tranquil forest scene with tall trees and lush greenery."},{"image":"https://images.unsplash.com/photo-1507525428034-b723cf961d3e","alt":"A beautiful beach at sunset, with gentle waves lapping at the shore."},{"image":"https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0","alt":"A silhouette of a hiker against a stunning mountain backdrop."},{"image":"https://images.unsplash.com/photo-1501785888041-af3ef285b470","alt":"A picturesque lake surrounded by mountains, perfect for kayaking."},{"image":"https://images.unsplash.com/photo-1509316785289-025f5b846b35","alt":"A breathtaking view of rock formations in a desert landscape."}]},{"id":"haSCRv-xiyGTpd2tpRxZl","instanceId":"U_DrMumgF4mbjHUcMx3zg","name":"item","type":"parameter","value":"TECxliJblD2-5kDlvcd7G"},{"id":"MJmQeMWCqLonzkw5fNGLO","instanceId":"Y79K4GEFvpK7EuqDSK9B2","name":"src","type":"expression","value":"$ws$dataSource$TECxliJblD2__DASH__5kDlvcd7G.image"},{"id":"-U6u3xqn7Q0J3gcjZuXc-","instanceId":"Y79K4GEFvpK7EuqDSK9B2","name":"loading","type":"string","value":"eager"},{"id":"S55LYgdLEpWmIJ7vrNysF","instanceId":"Y79K4GEFvpK7EuqDSK9B2","name":"width","type":"number","value":1920},{"id":"k_6XWwfvjkyjNlCX-QOuI","instanceId":"Y79K4GEFvpK7EuqDSK9B2","name":"height","type":"number","value":1080},{"id":"44uiFJbo-4dhoS9Er2wcm","instanceId":"9ME_HNJTznuI1fh1alkI9","name":"dv-lightbox-gallery","type":"string","value":""},{"id":"5lxjxNXUyxLpPJbfsRboK","instanceId":"Y79K4GEFvpK7EuqDSK9B2","name":"alt","type":"expression","value":"$ws$dataSource$TECxliJblD2__DASH__5kDlvcd7G.alt"},{"id":"Pm5IWkuLQ9agfApKWTSsJ","instanceId":"nEpnPx9k3MOuUDsaQgqQE","name":"dv-lightbox","type":"string","value":""},{"id":"vVi32tNCGofwAQEQok8wD","instanceId":"D85IA7JLC9ezRXIsqDete","name":"id","type":"string","value":"dv-lightbox-image"},{"id":"KPzBrf76IftcAuA2MdRB5","instanceId":"odUYzEbgCbhi6krjMSUX7","name":"type","type":"string","value":"button"},{"id":"aVXYcOYQhvnJi6AlZ4jh2","instanceId":"odUYzEbgCbhi6krjMSUX7","name":"dv-lightbox-close-button","type":"string","value":""},{"id":"lWiocQNm25JYEuA90t-XI","instanceId":"AliolIfKCcbH3ZIpxKXB8","name":"type","type":"string","value":"button"},{"id":"fvXTvLNuaGS8F4oeHBXJD","instanceId":"AliolIfKCcbH3ZIpxKXB8","name":"dv-lightbox-prev-button","type":"string","value":""},{"id":"nCq5moAtM0g_BdO9lKjZF","instanceId":"U91RQbb3MRjNv5zq1IEZm","name":"type","type":"string","value":"button"},{"id":"GtEsOZuzUQ_Mh4hZSOizI","instanceId":"U91RQbb3MRjNv5zq1IEZm","name":"dv-lightbox-next-button","type":"string","value":""},{"id":"07Gm784N267Wgh9XH25kh","instanceId":"hALCxXABSELe-Dvmbowq9","name":"code","type":"string","value":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>"},{"id":"TGc1T8pbDGfocFE6cgapi","instanceId":"LA-F7jV4fU4IvhJ3iBh_h","name":"code","type":"string","value":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>"},{"id":"kFTnR9i-bxcX5KBch_Ort","instanceId":"eaiZjleYeB5WVidhPZ-fc","name":"code","type":"string","value":"<svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z\" fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"></path></svg>"},{"id":"1g4xSjosm_QjGe1aMv9HH","instanceId":"r3VJ7W8d_vhFrVXOcJ2MV","name":"id","type":"string","value":"dv-lightbox-caption"},{"id":"cJFat9NsSawhLiu8ZyeKf","instanceId":"hALCxXABSELe-Dvmbowq9","name":"clientOnly","type":"boolean","value":true}],"assets":[]}}

Lightbox Gallery

Instructions

Overview

Add a responsive image gallery with lightbox functionality to your website, allowing visitors to view images in a full-screen overlay with navigation controls.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Lightbox%20Gallery/lightbox-gallery-v1.2.1.js"></script>[/code-block]

Add the Required Elements: Create a gallery container with the following structure:

lightbox gallery attributes

Required Elements

Gallery Container: Add dv-lightbox-gallery to the main gallery container
Gallery Items: Each item should be a direct child of the gallery container with an image inside
Lightbox Container: Add dv-lightbox to the lightbox overlay container
Lightbox Image: Add id="dv-lightbox-image" to the image element in the lightbox
Caption Element: Add id="dv-lightbox-caption" to the caption element in the lightbox
Navigation Buttons:
- Close button: Add dv-lightbox-close-button
- Previous button: Add dv-lightbox-prev-button
- Next button: Add dv-lightbox-next-button

Features

Keyboard Navigation:
- ESC key: Close the lightbox
- Arrow Left: Previous image
- Arrow Right: Next image
- Enter/Space: Open lightbox when focused on a gallery item
Accessibility: Maintains focus management for keyboard users
Responsive Images: Preserves srcset and sizes attributes for optimal image loading

Notes

The lightbox container should initially be hidden with style="display: none;"
Body scrolling is disabled when the lightbox is open
For best results, use consistent image aspect ratios in your gallery