<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-gallery.css?cb=">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-visual-modal.css?cb=">
<div class="property-gallery" data-module="propertyGallery">
<div class="property-gallery__item property-gallery__item--header">
<div class="property-gallery__item-inside">
<a href="#" class="property-gallery__button property-gallery__button--back">
Back to results
</a>
<div class="property-visual-share" data-module="propertyVisualModal">
<button class="property-gallery__button property-gallery__button--share js-modal-open is-desktop">
Share
</button>
<button class="property-gallery__button property-gallery__button--share js-share-trigger is-mobile" data-title="Camana Bay - Available soon" data-text="60 Nexus Way - 208" data-url="dart.ky/ref-a0e4j000005fjv4uaa">
Share
</button>
<div class="modal modal--share js-modal">
<div class="modal__container">
<div class="property-visual-share__wrapper">
<div class="property-visual-share__header">
Share
<button class="property-visual-share__header-icon js-modal-close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.3638 4.22168L19.778 5.63589L5.63585 19.778L4.22163 18.3638L18.3638 4.22168Z" fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
</svg>
</button>
</div>
<div class="property-visual-share__inside">
<div class="property-visual-share__content">
<div class="property-visual-share__img" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
<div class="property-visual-share__title">
<span class="property-visual-share__heading">
Camana Bay
</span>
<span class="property-visual-share__info">
Available soon
</span>
</div>
<h2 class="property-visual-share__text">
60 Nexus Way - 208
</h2>
</div>
<div class="property-visual-share__copy js-copy">
<span class="property-visual-share__copy-url">
dart.ky/ref-a0e4j000005fjv4uaa
</span>
<button class="property-visual-share__copy-trigger js-copy-trigger" data-copy="dart.ky/ref-a0e4j000005fjv4uaa">
<i class="property-visual-share__copy-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
<path d="M1 8H11V18H1V8Z" stroke="white" stroke-width="2" />
<path d="M8 4.65385V1H18V11H14.3462" stroke="white" stroke-width="2" />
</svg>
</i>
<span class="property-visual-share__copy-before">
Copy
</span>
<span class="property-visual-share__copy-after">
Copied
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="property-gallery__inside">
<div class="property-gallery__inside-item js-tabs-items is-active" data-index="0" tabindex="-1">
<div class="property-visual-gallery property-visual-gallery--2" data-module="propertyVisualModal">
<div class="property-visual-gallery__col lazy-load-image js-modal-open" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
<div class="property-visual-gallery__col lazy-load-image js-modal-open" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
<button class="property-visual-gallery__trigger js-modal-open">
<i class="property-visual-gallery__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 20 15" fill="none">
<path d="M5.98541 2.13564L6.58889 2.93301L5.98541 2.13564ZM14.0146 2.13564L14.6181 1.33826L14.0146 2.13564ZM14.6855 3.375H18V1.375H14.6855V3.375ZM18 3.375V13H20V3.375H18ZM18 13H2V15H18V13ZM2 13V3.375H0V13H2ZM2 3.375H5.31453V1.375H2V3.375ZM6.58889 2.93301C7.25935 2.42558 8.09314 2.125 9 2.125V0.125C7.64253 0.125 6.38776 0.577004 5.38192 1.33826L6.58889 2.93301ZM9 2.125H11V0.125H9V2.125ZM11 2.125C11.9069 2.125 12.7407 2.42558 13.4111 2.93301L14.6181 1.33826C13.6122 0.577004 12.3575 0.125 11 0.125V2.125ZM5.31453 3.375C5.81356 3.375 6.2533 3.187 6.58889 2.93301L5.38192 1.33826C5.32886 1.37842 5.3029 1.375 5.31453 1.375V3.375ZM2 3.375L2 3.375V1.375C0.895431 1.375 0 2.27043 0 3.375H2ZM2 13H2H0C0 14.1046 0.895432 15 2 15V13ZM18 13V15C19.1046 15 20 14.1046 20 13H18ZM18 3.375H20C20 2.27043 19.1046 1.375 18 1.375V3.375ZM14.6855 1.375C14.6971 1.375 14.6711 1.37842 14.6181 1.33826L13.4111 2.93301C13.7467 3.187 14.1864 3.375 14.6855 3.375V1.375Z" fill="#0054A6" />
<circle cx="10" cy="8" r="3" stroke="#0054A6" stroke-width="2" />
</svg>
</i>
2
</button>
<div class="modal modal--gallery js-modal">
<button class="modal__info modal__info--close js-modal-close">
Close
<i class="modal__info-icon modal__info-icon--close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.364 4.22168L19.7782 5.63589L5.63609 19.778L4.22188 18.3638L18.364 4.22168Z" fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
</svg>
</i>
</button>
<link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">
<div class="gallery gallery--has-thumbnails " data-module="gallery">
<div class="gallery__slides-container">
<div class="gallery__slides js-slides">
<div class="gallery__slide js-slide" data-type="image" data-slide-index="0">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="1">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
</div>
<span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
<div class="gallery__selection-label">
<span class="gallery__current-slide js-current-slide">1</span>
<span class="gallery__total-slides js-total-slides">2</span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
<div class="gallery__thumbs gallery__thumbs--scroll">
<div class="gallery__thumbs-inner">
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85)" data-thumb-index="0">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80)" data-thumb-index="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="property-gallery__inside-item js-tabs-items" data-index="1" tabindex="-1">
<div class="property-visual-video" data-module="propertyVisualModal">
<div class="property-visual-video__col js-modal-open">
<img src=" https://img.youtube.com/vi/qApVnpPei9I/maxresdefault.jpg" loading="lazy">
<div class="property-visual-video__trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126" fill="none">
<circle opacity="0.2" cx="63" cy="63" r="63" fill="#00B1E5" />
<circle cx="63" cy="63" r="46" fill="#00B1E5" />
<path d="M58.8275 53.8213C58.8275 52.9834 59.7962 52.517 60.4512 53.0397L71.7438 62.0509C72.2455 62.4512 72.2455 63.2138 71.7438 63.6141L60.4512 72.6253C59.7962 73.1479 58.8275 72.6816 58.8275 71.8437L58.8275 62.8325L58.8275 53.8213Z" stroke="white" stroke-width="2" />
</svg>
</div>
</div>
<div class="modal modal--video js-modal">
<span class="modal__info modal__info--title">
Video
<i class="modal__info-icon modal__info-icon--title">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="5" width="18" height="14" stroke="white" />
<path d="M10.307 9.17783L14.9995 12L10.307 14.8221L10.307 9.17783Z" fill="white" />
</svg>
</i>
</span>
<button class="modal__info modal__info--close js-modal-close">
Close
<i class="modal__info-icon modal__info-icon--close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.364 4.22168L19.7782 5.63589L5.63609 19.778L4.22188 18.3638L18.364 4.22168Z" fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
</svg>
</i>
</button>
<div class="js-modal-iframe">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/youtube-video.css?cb=">
<div class="youtube-video">
<div class="youtube-video__iframe-wrapper ">
<iframe class="youtube-video__iframe" loading="lazy" width="1600" height="900" src="https://www.youtube.com/embed/qApVnpPei9I" title="YouTube Video"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="property-gallery__inside-item js-tabs-items" data-index="2" tabindex="-1">
<div class="property-visual-tour">
<div class="property-visual-tour__col">
<iframe src="https://my.matterport.com/show/?m=Srdq49wjRh4" width="998" height="561" loading="lazy"></iframe>
</div>
</div>
</div>
<div class="property-gallery__inside-item js-tabs-items" data-index="4" tabindex="-1">
<div class="property-visual-stack" data-module="propertyVisualModal">
<div class="property-visual-stack__col">
<button class="property-visual-stack__trigger js-modal-open">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44" fill="none">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M20 24L12.5 31.5" stroke="#0054A6" stroke-width="2" />
<path d="M18 32L12 32L12 26" stroke="#0054A6" stroke-width="2" />
<path d="M24 20L31.5 12.5" stroke="#0054A6" stroke-width="2" />
<path d="M26 12H32V18" stroke="#0054A6" stroke-width="2" />
</svg>
</button>
<iframe class="property-visual-stack__iframe" src="https://www.provenanceproperties.com/media/1024/olea-brochure-website.pdf" height="100%" width="100%" loading="lazy"></iframe>
</div>
<div class="modal modal--stack js-modal">
<span class="modal__info modal__info--title">
Stacking
<i class="modal__info-icon modal__info-icon--title">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 15H21V20H3V15Z" stroke="white" stroke-width="2" />
<path d="M5 10H19V15H5V10Z" stroke="white" stroke-width="2" />
<path d="M7 5H17V10H7V5Z" stroke="white" stroke-width="2" />
</svg> </i>
</span>
<button class="modal__info modal__info--close js-modal-close">
Close
<i class="modal__info-icon modal__info-icon--close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.364 4.22168L19.7782 5.63589L5.63609 19.778L4.22188 18.3638L18.364 4.22168Z" fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
</svg>
</i>
</button>
<div class="js-modal-iframe">
<iframe class="property-visual-stack__iframe" src="https://www.provenanceproperties.com/media/1024/olea-brochure-website.pdf" height="100%" width="100%" loading="lazy"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="property-gallery__item property-gallery__item--footer">
<div class="property-visual-tabs">
<button class="property-visual-tabs__trigger js-tabs-trigger is-active" data-index="0">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="6" width="18" height="14" stroke="white" />
<line x1="4" y1="3.5" x2="20" y2="3.5" stroke="white" />
<path d="M4 20L10 12L15 20" stroke="white" />
<circle cx="16.5" cy="10.5" r="1.5" fill="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Gallery
</span>
</button>
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="1">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="5" width="18" height="14" stroke="white" stroke-width="2" />
<path d="M10.2427 8.75732L14.4853 12L10.2427 15.2426L10.2427 8.75732Z" fill="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Video
</span>
</button>
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="2">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M15.1311 4.20312C14.2742 2.82482 13.1853 2 12 2C9.23858 2 7 6.47715 7 12C7 17.5228 9.23858 22 12 22C14.7614 22 17 17.5228 17 12C17 10.7171 16.8792 9.49066 16.6591 8.36364L16.5 7.5" stroke="white" />
<path d="M7.90909 16.5638C4.42591 15.7821 2 14.0327 2 12C2 9.23858 6.47715 7 12 7C17.5228 7 22 9.23858 22 12C22 14.7614 17.5228 17 12 17C11.6625 17 11.3289 16.9916 11 16.9753" stroke="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
360 tour
</span>
</button>
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="4">
<i class="property-visual-tabs__trigger-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 15H21V20H3V15Z" stroke="white" stroke-width="2" />
<path d="M5 10H19V15H5V10Z" stroke="white" stroke-width="2" />
<path d="M7 5H17V10H7V5Z" stroke="white" stroke-width="2" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Stacking
</span>
</button>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-gallery.css?cb={{cacheBuster}}">
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-visual-modal.css?cb={{cacheBuster}}">
{{/if}}
<div class="property-gallery" data-module="propertyGallery">
<div class="property-gallery__item property-gallery__item--header">
<div class="property-gallery__item-inside">
<a href="#" class="property-gallery__button property-gallery__button--back">
Back to results
</a>
{{> @property-visual-share }}
</div>
</div>
<div class="property-gallery__inside">
<div class="property-gallery__inside-item js-tabs-items is-active" data-index="0" tabindex="-1">
{{> @property-visual-gallery }}
</div>
{{#if video}}
<div class="property-gallery__inside-item js-tabs-items" data-index="1" tabindex="-1">
{{> @property-visual-video }}
</div>
{{/if}}
{{#if virtualTour }}
<div class="property-gallery__inside-item js-tabs-items" data-index="2" tabindex="-1">
{{> @property-visual-tour }}
</div>
{{/if}}
{{#if floorPlanUrl}}
<div class="property-gallery__inside-item js-tabs-items" data-index="3" tabindex="-1">
{{> @property-visual-floor-plan }}
</div>
{{/if}}
{{#if stackUrl}}
<div class="property-gallery__inside-item js-tabs-items" data-index="4" tabindex="-1">
{{> @property-visual-stack }}
</div>
{{/if}}
</div>
<div class="property-gallery__item property-gallery__item--footer">
<div class="property-visual-tabs">
<button class="property-visual-tabs__trigger js-tabs-trigger is-active" data-index="0">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="6" width="18" height="14" stroke="white" />
<line x1="4" y1="3.5" x2="20" y2="3.5" stroke="white" />
<path d="M4 20L10 12L15 20" stroke="white" />
<circle cx="16.5" cy="10.5" r="1.5" fill="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Gallery
</span>
</button>
{{#if video}}
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="1">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="3" y="5" width="18" height="14" stroke="white" stroke-width="2" />
<path d="M10.2427 8.75732L14.4853 12L10.2427 15.2426L10.2427 8.75732Z" fill="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Video
</span>
</button>
{{/if}}
{{#if virtualTour}}
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="2">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M15.1311 4.20312C14.2742 2.82482 13.1853 2 12 2C9.23858 2 7 6.47715 7 12C7 17.5228 9.23858 22 12 22C14.7614 22 17 17.5228 17 12C17 10.7171 16.8792 9.49066 16.6591 8.36364L16.5 7.5"
stroke="white" />
<path
d="M7.90909 16.5638C4.42591 15.7821 2 14.0327 2 12C2 9.23858 6.47715 7 12 7C17.5228 7 22 9.23858 22 12C22 14.7614 17.5228 17 12 17C11.6625 17 11.3289 16.9916 11 16.9753"
stroke="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
360 tour
</span>
</button>
{{/if}}
{{#if floorPlanUrl}}
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="3">
<i class="property-visual-tabs__trigger-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 10V21H21V10H12" stroke="white" />
<path d="M12 10V3H10M3 10V3H5L7 6.5" stroke="white" />
<path d="M12 15L12 10" stroke="white" />
<path d="M7 14H3" stroke="white" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Floor plan
</span>
</button>
{{/if}}
{{#if stackUrl}}
<button class="property-visual-tabs__trigger js-tabs-trigger" data-index="4">
<i class="property-visual-tabs__trigger-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 15H21V20H3V15Z" stroke="white" stroke-width="2" />
<path d="M5 10H19V15H5V10Z" stroke="white" stroke-width="2" />
<path d="M7 5H17V10H7V5Z" stroke="white" stroke-width="2" />
</svg>
</i>
<span class="property-visual-tabs__trigger-text">
Stacking
</span>
</button>
{{/if}}
</div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"name": "Default",
"share": {
"title": "Camana Bay",
"info": "Available soon",
"text": "60 Nexus Way - 208",
"url": "dart.ky/ref-a0e4j000005fjv4uaa",
"image": {
"firstInstance": true,
"theme": "default",
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
"gallery": {
"theme": "default",
"firstInstance": true,
"showThumbnailScroll": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"video": {
"theme": "default",
"firstInstance": true,
"videoUrl": "https://www.youtube.com/embed/qApVnpPei9I",
"posterUrl": " https://img.youtube.com/vi/qApVnpPei9I/maxresdefault.jpg"
},
"virtualTour": "https://my.matterport.com/show/?m=Srdq49wjRh4",
"floorPlanUrl": null,
"stackUrl": "https://www.provenanceproperties.com/media/1024/olea-brochure-website.pdf"
}
import copyToClipboard from '../../../../js/utils/copy';
import navigatorShare from '../../../../js/utils/navigator-share';
export class PropertyGallery {
constructor(module) {
this.module = module;
this.tabTriggers = this.module.querySelectorAll('.js-tabs-trigger');
this.tabItems = this.module.querySelectorAll('.js-tabs-items');
this.copy = this.module.querySelector('.js-copy');
this.classNames = {
active: 'is-active',
copied: 'property-visual-share__copy--active',
};
this.loadEventListeners();
}
loadEventListeners() {
this.module.addEventListener('click', (e) => {
const { classList, dataset } = e.target;
const {
tabTriggers, tabItems, classNames, copy,
} = this;
const { active, copied } = classNames;
if (classList.contains('js-tabs-trigger')) {
const { index } = dataset;
const matchingTabTrigger = Array.from(this.tabTriggers).find((trigger) => trigger.dataset.index === index);
const matchingTabItem = Array.from(this.tabItems).find((item) => item.dataset.index === index);
PropertyGallery.removeActive(tabTriggers, active);
PropertyGallery.removeActive(tabItems, active);
PropertyGallery.setActive(matchingTabTrigger, active);
PropertyGallery.setActive(matchingTabItem, active);
PropertyGallery.setFocus(matchingTabItem);
}
if (classList.contains('js-copy-trigger')) {
copyToClipboard(e.target, copy, copied);
}
if (classList.contains('js-share-trigger')) {
navigatorShare(e.target);
}
});
}
static removeActive(elem, className) {
elem.forEach((item) => item.classList.contains(className) && item.classList.remove(className));
}
static setActive(elem, className) {
elem.classList.add(className);
}
static setFocus(elem) {
setTimeout(() => {
elem.focus();
}, 100);
}
}
export default (module) => new PropertyGallery(module);
@use 'sass:map';
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import '../property-visuals/property-visual-tabs';
@import '../property-visuals/property-visual-gallery';
@import '../property-visuals/property-visual-video';
@import '../property-visuals/property-visual-tour';
@import '../property-visuals/property-visual-floor-plan';
@import '../property-visuals/property-visual-share';
@import '../property-visuals/property-visual-stack';
$property-visual: (
transition-duration: 200ms,
slide-transition-duration: 400ms,
background-color: $color-grey,
height-desktop: rem(670),
height-mobile: rem(347),
header-height: rem(60),
header-button-color: $color-link,
header-button-color-hover: $color-link-hover,
footer-height-desktop: rem(70),
footer-height-mobile: rem(60),
gutter: rem(16)
);
.property-gallery {
@extend %spacer-large;
background-color: map.get($property-visual, 'background-color');
height: map.get($property-visual, 'height-mobile');
position: relative;
width: 100%;
z-index: 351;
@include breakpoint(medium) {
height: 0;
padding-bottom: 48.5555%;
}
@media only screen and (min-width: 1440px) {
height: map.get($property-visual, 'height-desktop');
padding-bottom: 0;
}
&__item {
left: 0;
position: absolute;
width: 100%;
&--header {
height: map.get($property-visual, 'header-height');
top: 0;
z-index: 1;
}
&--footer {
bottom: 0;
@include breakpoint(medium) {
height: map.get($property-visual, 'footer-height-desktop');
}
@include breakpoint(small down) {
height: map.get($property-visual, 'footer-height-mobile');
}
}
&-inside {
height: map.get($property-visual, 'header-height');
position: relative;
@include xy-grid-container($grid-container, 0);
}
}
&__button {
@extend %p--fine;
align-items: center;
background-color: transparent;
border-width: 0;
bottom: 0;
color: map.get($property-visual, 'header-button-color');
cursor: pointer;
display: flex;
padding: 0;
position: absolute;
text-decoration: none;
text-transform: uppercase;
top: 0;
transition: color map.get($property-visual-tabs, 'transition-duration') ease-in-out;
white-space: nowrap;
&:hover,
&:focus {
color: map.get($property-visual, 'header-button-color-hover');
outline: none;
}
&::before {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
height: rem(24);
}
&--back {
left: rem(8);
&::before {
background-image: url('../images/pvg/back-icon.svg');
width: rem(24);
}
}
&--share {
right: map.get($property-visual, 'gutter');
&::before {
background-image: url('../images/pvg/share-icon.svg');
margin-right: rem(8);
position: relative;
top: (-(rem(1)));
width: rem(12);
}
}
&.is-desktop {
display: none;
@include breakpoint(medium) {
display: flex;
}
}
&.is-mobile {
@include breakpoint(medium) {
display: none;
}
}
}
&__inside {
height: 100%;
position: relative;
@include xy-grid-container($grid-container, 0);
@include breakpoint(medium) {
height: 0;
padding-bottom: 48.5555%;
}
@media only screen and (min-width: 1440px) {
height: 100%;
padding-bottom: 0;
}
&-item {
left: map.get($property-visual, 'gutter');
opacity: 0;
position: absolute;
right: map.get($property-visual, 'gutter');
top: map.get($property-visual, 'header-height');
transition: all map.get($property-visual, 'slide-transition-duration') ease-in-out;
visibility: hidden;
@include breakpoint(medium) {
bottom: calc(map.get($property-visual, 'footer-height-desktop') + map.get($property-visual, 'gutter'));
}
@include breakpoint(small down) {
bottom: calc(map.get($property-visual, 'footer-height-mobile') + map.get($property-visual, 'gutter'));
}
&:focus {
outline: none;
}
&.is-active {
opacity: 1;
visibility: visible;
}
}
}
}
No notes defined.