<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="video" data-slide-index="0">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/mp4-video.css?cb=">
<div class="mp4-video" data-module="video" data-fullscreen="false">
<div class="mp4-video__video-container js-video-container">
<video data-module="video" class="video-player__video" playsinline preload="metadata">
</video>
</div>
</div>
</div>
<div class="gallery__slide js-slide" data-type="youtube-video" data-slide-index="1">
<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 class="gallery__slide js-slide" data-type="image" data-slide-index="2">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" 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=10" data-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)" class="js-medium-image" 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=10" data-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="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="3">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" 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=10" 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="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" 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="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="4">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" 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=10" 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="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" 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="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="5">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?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="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="6">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?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="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="7">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?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="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" 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">8</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-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="0">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="1">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="2">
</div>
<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=200&q=80)" data-thumb-index="3">
</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=200&q=80)" data-thumb-index="4">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="5">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="6">
</div>
<div class="gallery__thumb js-thumb" style="background-image: url(https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80)" data-thumb-index="7">
</div>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/gallery.css?cb={{cacheBuster}}">
{{/if}}
<div class="gallery{{#unless hideThumbnails}} gallery--has-thumbnails{{/unless}} {{#if verticalScroll}}gallery--vertical-scroll js-vertical-scroll{{/if}}" {{#unless disableJsInit}}data-module="gallery"{{/unless}}>
<div class="gallery__slides-container">
{{#if destinationUrl}}
<a href="{{destinationUrl}}">
{{/if}}
<div class="gallery__slides js-slides">
{{#each slides}}
<div class="gallery__slide js-slide" data-type="{{type}}" data-slide-index="{{@index}}">
{{#ifEquals type "youtube-video"}}
{{> @youtube-video videoUrl=video.videoUrl firstInstance=video.firstInstance theme=../theme}}
{{/ifEquals}}
{{#ifEquals type "video"}}
{{> @mp4-video firstInstance=video.firstInstance theme=../theme autoplay=false showControls=true videoUrl=video.videoUrl }}
{{/ifEquals}}
{{#ifEquals type "image"}}
{{> @gallery-image firstInstance=image.firstInstance altText=image.altText caption=image.caption placeholderImageUrl=image.placeholderImageUrl fallbackImageUrl=image.fallbackImageUrl sources=image.sources ratio=image.ratio isOriginalSize=image.isOriginalSize theme=../theme }}
{{/ifEquals}}
</div>
{{/each}}
</div>
{{#if destinationUrl}}
</a>
{{/if}}
<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">{{slides.length}}</span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
{{#if hideThumbnails}}
<div class="gallery__dots js-dots">
{{#each slides}}
<span class="gallery__dot js-dot {{#if @first}}active{{/if}}" data-dot-index="{{@index}}"></span>
{{/each}}
</div>
{{/if}}
{{#unless hideThumbnails}}
<div class="gallery__thumbs {{#if showThumbnailScroll}}gallery__thumbs--scroll{{/if}}">
<div class="gallery__thumbs-inner">
{{#each slides}}
<div class="gallery__thumb js-thumb" style="background-image: url({{this.thumbnailUrl}})"
data-thumb-index="{{@index}}">
</div>
{{/each}}
</div>
</div>
{{/unless}}
</div>
{
"theme": "default",
"firstInstance": true,
"showThumbnailScroll": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "video",
"video": {
"firstInstance": true,
"theme": "default",
"videoUrl": "/media/test.mp4"
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "youtube-video",
"video": {
"firstInstance": true,
"theme": "default",
"videoUrl": "https://www.youtube.com/embed/qApVnpPei9I"
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"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"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"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=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"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"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
}
export class Gallery {
constructor(component, options) {
this.component = component;
if (options) {
this.options = options;
} else {
this.options = { intersectionThreshold: 0.95 };
}
this.slidesContainer = this.component.querySelector('.js-slides');
this.thumbs = this.component.querySelectorAll('.js-thumb');
this.currentSlideText = this.component.querySelector('.js-current-slide');
this.prevButton = this.component.querySelector('.js-arrow-left');
this.nextButton = this.component.querySelector('.js-arrow-right');
this.dots = this.component.querySelectorAll('.js-dot');
this.init();
}
init() {
this.slides = this.component.querySelectorAll('.js-slide');
this.activeAssetIndex = 0;
this.numOfSlides = this.slides.length;
this.component.querySelector('.js-total-slides').innerText = this.numOfSlides;
for (let i = 0; i < this.thumbs.length; i += 1) {
this.thumbs[i].addEventListener('click', (event) => this.thumbnailClick(event), false);
}
if (this.numOfSlides <= 1) {
this.prevButton.style.display = 'none';
this.nextButton.style.display = 'none';
} else {
this.prevButton.style.display = '';
this.nextButton.style.display = '';
this.prevButton.addEventListener('click', (e) => { e.preventDefault(); this.showPrev(); }, false);
this.prevButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.showPrev();
}
});
this.nextButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.showNext();
}
});
this.nextButton.addEventListener('click', (e) => { e.preventDefault(); this.showNext(); }, false);
}
this.dots.forEach((dot) => {
dot.addEventListener('click', (e) => {
e.preventDefault();
const index = dot.dataset.dotIndex;
this.showSlide(parseInt(index, 10));
});
});
setTimeout(() => {
const config = {
root: this.slidesContainer,
rootMargin: '0px',
threshold: this.options.intersectionThreshold,
};
const onIntersection = (entries) => {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
if (entry.isIntersecting && entry.intersectionRatio < 1) {
const cardIndex = parseInt(entry.target.dataset.slideIndex, 10);
this.activeAssetIndex = cardIndex;
this.updateUI();
}
}
};
const observer = new IntersectionObserver(onIntersection, config);
this.slides.forEach((slide) => {
observer.observe(slide);
});
}, 500);
this.lazyLoadImages();
}
lazyLoadImages() {
if (this.imageLoaderObserver) {
// Remove any existing observations
this.imageLoaderObserver.disconnect();
}
const config = {
rootMargin: '200px 200px',
threshold: 0.01,
};
const onIntersection = (entries, observer) => {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
if (entry.intersectionRatio > 0) {
const imageElement = entry.target;
observer.unobserve(imageElement);
Gallery.setImageSources(imageElement);
}
}
};
this.imageLoaderObserver = new IntersectionObserver(onIntersection, config);
const imagesToLazyLoad = this.component.querySelectorAll('.image');
imagesToLazyLoad.forEach((image) => {
this.imageLoaderObserver.observe(image);
});
}
static setImageSources(imageElement, onLoadCallback) {
// The gallery component lazy loads the image using a data-srcset so we need to ensure srcset is set correctly
const sources = imageElement.querySelectorAll('source');
const img = imageElement.querySelector('img');
if (onLoadCallback) {
img.onload = () => {
onLoadCallback();
};
}
sources.forEach((source) => {
source.setAttribute('srcset', source.dataset.srcset);
});
img.setAttribute('src', img.dataset.src);
return imageElement;
}
showPrev() {
if (this.activeAssetIndex === 0) {
this.showSlide(this.numOfSlides - 1);
} else {
this.showSlide(this.activeAssetIndex - 1);
}
}
showNext() {
if (this.activeAssetIndex === this.numOfSlides - 1) {
this.showSlide(0);
} else {
this.showSlide(this.activeAssetIndex + 1);
}
}
setSlides(slides) {
this.slidesContainer.innerHTML = '';
const dotsContainer = this.component.querySelector('.js-dots');
if (dotsContainer) {
dotsContainer.innerHTML = '';
}
const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA';
slides.forEach((slide, index) => {
const slideElement = document.createElement('div');
slideElement.classList.add('gallery__slide');
slideElement.classList.add('js-slide');
slideElement.dataset.type = slide.type;
slideElement.dataset.slideIndex = index;
if (slide.type === 'image') {
let pictureHtml = '<div class="image"><picture>';
slide.image.sources.forEach((source) => {
pictureHtml += `<source media="(max-width: 840px)" type="${source.type}" srcset="${placeholderImage}" data-srcset="${source.mobileImageUrl}"/>
<source media="(min-width: 841px)" type="${source.type}" srcset="${placeholderImage}" data-srcset="${source.desktopImageUrl}"/>`;
});
pictureHtml += `<img src="${placeholderImage}" data-src="${slide.image.fallbackImageUrl}" alt="${slide.image.altText}">
</picture></div>`;
slideElement.innerHTML = pictureHtml;
} else {
console.error(`Type '${slide.type}' cannot yet be added dynamically`);
}
this.slidesContainer.appendChild(slideElement);
if (dotsContainer) {
const dotElement = document.createElement('span');
dotElement.href = '#';
dotElement.classList.add('gallery__dot');
dotElement.classList.add('js-dot');
if (index === 0) {
dotElement.classList.add('active');
}
dotElement.dataset.dotIndex = index;
dotsContainer.appendChild(dotElement);
}
});
this.dots = this.component.querySelectorAll('.js-dot');
this.init();
}
showSlide(index) {
if (!this.slides[index]) {
return;
}
if (index === this.activeAssetIndex) {
// It's already showing
return;
}
if (this.thumbs.length && index !== this.activeAssetIndex) {
this.thumbs.forEach((asset) => asset.classList.remove('active'));
this.thumbs[index].classList.add('active');
}
// Stop the video before displaying the next slide
this.pauseVideo();
this.activeAssetIndex = index;
this.playVideo();
this.updateUI();
if (this.component.classList.contains('js-vertical-scroll')) {
this.slidesContainer.scrollTop = parseInt(this.slidesContainer.parentNode.clientHeight * this.activeAssetIndex, 10);
} else {
this.slidesContainer.scrollLeft = parseInt(this.slidesContainer.clientWidth * this.activeAssetIndex, 10);
}
}
updateUI() {
this.currentSlideText.innerText = this.activeAssetIndex + 1;
if (this.dots.length) {
this.dots.forEach((asset) => {
asset.classList.remove('active');
});
const currentDot = [...this.dots].filter((dot) => { return dot.dataset && dot.dataset.dotIndex === this.activeAssetIndex.toString(); })[0] || null;
if (currentDot) {
currentDot.classList.add('active');
}
}
this.dispatchChangeEvent();
}
playVideo() {
if (this.slides[this.activeAssetIndex].dataset.type === 'video') {
// Start playing the video again
const video = this.slides[this.activeAssetIndex].querySelector('video');
if (video) {
video.play();
}
}
}
pauseVideo(index) {
const videoIndexToPause = index || this.activeAssetIndex;
if (this.slides[videoIndexToPause].dataset.type === 'video') {
const video = this.slides[videoIndexToPause].querySelector('video');
if (video) {
video.pause();
}
}
}
thumbnailClick(event) {
const thisThumbnail = event.target;
this.thumbs.forEach((thumb) => {
thumb.classList.remove('active');
});
const index = parseInt(thisThumbnail.dataset.thumbIndex, 10);
thisThumbnail.classList.add('active');
this.showSlide(index);
}
addChangeListener(callback) {
this.changeCallback = callback;
}
dispatchChangeEvent() {
if (this.changeCallback) {
this.changeCallback();
}
}
}
export default (module) => new Gallery(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.gallery {
$this: &;
&__slides-container {
display: block;
position: relative;
text-decoration: none;
width: 100%;
#{$this}--vertical-scroll & {
height: 0;
overflow: hidden;
padding-bottom: 56.5%;
}
}
&__link {
text-decoration: none;
}
&__title {
@extend %heading03;
text-decoration: none;
}
&__arrow {
color: $color-gallery-arrow;
cursor: pointer;
height: 100%;
line-height: 19px;
text-shadow: 0 0 5px $color-gallery-arrow-shadow;
width: 100%;
&::before {
bottom: 0;
font-size: 3rem;
margin-top: -7%;
position: absolute;
top: 57%;
}
span {
@extend %visually-hidden;
}
&--left {
&::before {
content: '\02039';
left: 10px;
}
}
&--right {
&::before {
content: '\0203A';
left: auto;
right: 10px;
}
}
}
&__selection-label {
background-color: $color-white;
bottom: 0;
left: 50%;
padding: rem(10);
position: absolute;
transform: translateX(-50%);
}
&__current-slide {
&::after {
content: '/';
padding-left: rem(5);
}
}
&__slides {
display: flex;
overflow-x: auto;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-color: transparent transparent; // Hide the scrollbar in FF
scrollbar-width: thin;
// Hide the scrollbar in Safari, Chrome, Opera and (the new Chromium) Edge
&::-webkit-scrollbar {
display: none;
}
#{$this}--vertical-scroll & {
flex-direction: column;
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
scroll-snap-type: y mandatory;
top: 0;
width: 100%;
}
}
&__slide {
border-radius: 3px;
display: block;
flex-shrink: 0;
overflow: hidden;
padding-bottom: 56.5%;
position: relative;
scroll-snap-align: center;
width: 100%;
&.active {
opacity: 1;
}
.image {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
img {
@extend %object-fit-cover;
max-width: none;
}
}
video,
.youtube-video {
@extend %object-fit-cover;
max-width: none;
}
.mp4-video__video-container {
position: static;
}
.video-controls {
bottom: rem(30);
}
}
&__thumbs {
overflow-x: visible;
overflow-y: visible;
width: 100%;
&--scroll {
overflow-x: auto;
overflow-y: hidden;
}
}
&__thumbs-inner {
display: block;
font-size: 0;
margin-top: 10px;
text-align: left;
transition: 450ms transform;
white-space: nowrap;
width: 100%;
&:hover {
#{$this}__thumb {
opacity: .3;
&:hover {
opacity: 1;
transform: scale(1.1);
}
}
}
}
&__thumb {
background: center no-repeat;
background-size: cover;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
margin: rem(5);
position: relative;
transform-origin: center center;
transition: 450ms transform;
width: calc((100% / 6) - 10px);
&::after {
// Make it a square
content: '';
display: block;
padding-bottom: 100%;
}
}
&__dots {
display: flex;
justify-content: center;
}
&__dot {
background-color: $color-black;
border-radius: rem(5);
height: rem(10);
margin: rem(10) rem(5);
width: rem(10);
&.active {
background-color: $color-grey;
}
}
}
No notes defined.