46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
/**
|
|
* XShop Product Gallery — vanilla, accessible, RTL-safe.
|
|
* Swaps main image on thumbnail click/keyboard.
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
function initGalleries() {
|
|
var galleries = document.querySelectorAll('[data-xshop-gallery]');
|
|
galleries.forEach(function (gal) {
|
|
var mainImg = gal.querySelector('[data-xshop-main-image]');
|
|
var thumbs = gal.querySelectorAll('.xshop-product__thumb');
|
|
if (!mainImg || !thumbs.length) return;
|
|
thumbs.forEach(function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var large = btn.getAttribute('data-large');
|
|
if (!large) return;
|
|
mainImg.setAttribute('src', large);
|
|
thumbs.forEach(function (t) {
|
|
t.classList.remove('is-active');
|
|
t.setAttribute('aria-selected', 'false');
|
|
});
|
|
btn.classList.add('is-active');
|
|
btn.setAttribute('aria-selected', 'true');
|
|
});
|
|
btn.addEventListener('keydown', function (e) {
|
|
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') return;
|
|
e.preventDefault();
|
|
var idx = Array.prototype.indexOf.call(thumbs, btn);
|
|
var next;
|
|
if (e.key === 'Home') next = 0;
|
|
else if (e.key === 'End') next = thumbs.length - 1;
|
|
else if (e.key === 'ArrowLeft') next = idx > 0 ? idx - 1 : thumbs.length - 1;
|
|
else next = idx < thumbs.length - 1 ? idx + 1 : 0;
|
|
thumbs[next].focus();
|
|
thumbs[next].click();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initGalleries);
|
|
} else {
|
|
initGalleries();
|
|
}
|
|
})();
|