52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
(function () {
|
|
var AUTOPLAY_DELAY = 4500;
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var thumbs = document.querySelectorAll('.screenshot-thumb');
|
|
var mainImg = document.getElementById('screenshotMainImg');
|
|
var caption = document.getElementById('screenshotCaption');
|
|
|
|
if (!thumbs.length || !mainImg) {
|
|
return;
|
|
}
|
|
|
|
var index = 0;
|
|
var autoplay = null;
|
|
|
|
function activate(i) {
|
|
thumbs.forEach(function (thumb) { thumb.classList.remove('active'); });
|
|
thumbs[i].classList.add('active');
|
|
mainImg.src = thumbs[i].getAttribute('data-img');
|
|
if (caption) {
|
|
caption.textContent = thumbs[i].getAttribute('data-caption');
|
|
}
|
|
index = i;
|
|
}
|
|
|
|
function startAutoplay() {
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
return;
|
|
}
|
|
autoplay = setInterval(function () {
|
|
activate((index + 1) % thumbs.length);
|
|
}, AUTOPLAY_DELAY);
|
|
}
|
|
|
|
function resetAutoplay() {
|
|
if (autoplay) {
|
|
clearInterval(autoplay);
|
|
}
|
|
startAutoplay();
|
|
}
|
|
|
|
thumbs.forEach(function (thumb, i) {
|
|
thumb.addEventListener('click', function () {
|
|
activate(i);
|
|
resetAutoplay();
|
|
});
|
|
});
|
|
|
|
startAutoplay();
|
|
});
|
|
})();
|