(function () {
var MAX_TRIES = 80;
var RETRY_INTERVAL = 100;
function findGrids() {
return document.querySelectorAll('.customGalleryGrid:not([data-basetemplate-gallery-built])');
}
function buildCss() {
return (
'.customGalleryGrid {' +
' display: flex;' +
' flex-wrap: wrap;' +
' gap: var(--customGallery-gap, 16px);' +
' width: 100%;' +
'}' +
'.customGalleryGrid > div {' +
' flex: 1 1 calc((100% / var(--customGallery-columns, 4)) - var(--customGallery-gap, 16px));' +
' max-width: calc((100% / var(--customGallery-columns, 4)) - var(--customGallery-gap, 16px));' +
' aspect-ratio: var(--customGallery-aspect, 4/3);' +
' background: var(--customGallery-bg, #f1f1f1);' +
' overflow: hidden;' +
' border-radius: var(--customGallery-radius, 4px);' +
' box-shadow: var(--customGallery-shadow, 0 4px 10px rgba(0,0,0,0.12));' +
' cursor: pointer;' +
'}' +
'.customGalleryGrid > div img {' +
' width: 100%;' +
' height: 100%;' +
' object-fit: cover;' +
' transition: transform 0.4s ease;' +
'}' +
'.customGalleryGrid > div:hover img {' +
' transform: scale(var(--customGallery-hover-scale, 1.06));' +
'}' +
'@media (max-width: 768px) {' +
' .customGalleryGrid > div {' +
' flex: 1 1 calc((100% / var(--customGallery-mobile-columns, 1)) - var(--customGallery-gap, 16px));' +
' max-width: calc((100% / var(--customGallery-mobile-columns, 1)) - var(--customGallery-gap, 16px));' +
' }' +
'}' +
'.customGalleryLightbox {' +
' display: none;' +
' position: fixed;' +
' top: 0;' +
' left: 0;' +
' width: 100%;' +
' height: 100%;' +
' background: var(--customGallery-overlay-bg, rgba(0,0,0,0.9));' +
' z-index: 9999;' +
' align-items: center;' +
' justify-content: center;' +
'}' +
'.customGalleryLightbox.active {' +
' display: flex;' +
'}' +
'.customGalleryLightbox-inner {' +
' max-width: 90%;' +
' max-height: 85vh;' +
' display: flex;' +
' align-items: center;' +
' justify-content: center;' +
'}' +
'.customGalleryLightbox-inner img {' +
' max-width: 100%;' +
' max-height: 85vh;' +
' object-fit: contain;' +
' border-radius: var(--customGallery-radius, 4px);' +
'}' +
'.customGalleryClose {' +
' position: absolute;' +
' top: 20px;' +
' right: 20px;' +
' background: transparent;' +
' border: none;' +
' color: var(--customGallery-close-color, #fff);' +
' font-size: 28px;' +
' cursor: pointer;' +
' z-index: 10001;' +
' transition: color 0.2s ease;' +
'}' +
'.customGalleryClose:hover {' +
' color: var(--customGallery-close-hover-color, #ccc);' +
'}' +
'.customGalleryArrow {' +
' position: absolute;' +
' top: 50%;' +
' transform: translateY(-50%);' +
' background: var(--customGallery-arrow-bg, rgba(255,255,255,0.15));' +
' border: none;' +
' color: var(--customGallery-arrow-color, #fff);' +
' width: var(--customGallery-arrow-size, 48px);' +
' height: var(--customGallery-arrow-size, 48px);' +
' border-radius: 50%;' +
' font-size: 18px;' +
' cursor: pointer;' +
' display: flex;' +
' align-items: center;' +
' justify-content: center;' +
' z-index: 10001;' +
' transition: background var(--customGallery-transition-duration, 0.4s) ease;' +
'}' +
'.customGalleryArrow:hover {' +
' background: var(--customGallery-arrow-hover-bg, rgba(255,255,255,0.35));' +
'}' +
'.customGalleryArrow--prev {' +
' left: 20px;' +
'}' +
'.customGalleryArrow--next {' +
' right: 20px;' +
'}' +
'@media (max-width: 768px) {' +
' .customGalleryArrow {' +
' width: 40px;' +
' height: 40px;' +
' font-size: 16px;' +
' }' +
'}'
);
}
function addStyleSheet(styles) {
if (document.querySelector('style[data-basetemplate="gallery-always"]')) return;
var stylesheet = document.createElement('style');
stylesheet.setAttribute('data-basetemplate', 'gallery-always');
stylesheet.appendChild(document.createTextNode(styles));
document.head.appendChild(stylesheet);
}
function elementBuild(type, attrs, content) {
var el = document.createElement(type);
if (attrs) {
for (var key in attrs) el.setAttribute(key, attrs[key]);
}
if (content != null) el.insertAdjacentHTML('afterbegin', content);
return el;
}
function buildInstance(grid, index) {
grid.setAttribute('data-basetemplate-gallery-built', 'true');
var itemEls = grid.children;
for (var i = 0; i < itemEls.length; i++) {
itemEls[i].classList.add('customGallery-item');
}
var items = Array.from(grid.querySelectorAll('img'));
var lightbox = elementBuild('div', {
class: 'customGalleryLightbox',
id: 'customGalleryLightbox-' + index
});
var closeBtn = elementBuild('button', { class: 'customGalleryClose', type: 'button' }, '');
var prevBtn = elementBuild('button', { class: 'customGalleryArrow customGalleryArrow--prev', type: 'button' }, '');
var nextBtn = elementBuild('button', { class: 'customGalleryArrow customGalleryArrow--next', type: 'button' }, '');
var inner = elementBuild('div', { class: 'customGalleryLightbox-inner' }, '
');
lightbox.appendChild(closeBtn);
lightbox.appendChild(prevBtn);
lightbox.appendChild(inner);
lightbox.appendChild(nextBtn);
grid.insertAdjacentElement('afterend', lightbox);
var lightboxImg = inner.querySelector('img');
var currentIndex = 0;
function openLightbox(i) {
currentIndex = i;
lightboxImg.src = items[currentIndex].src;
lightboxImg.alt = items[currentIndex].alt;
lightbox.classList.add('active');
}
function closeLightbox() {
lightbox.classList.remove('active');
}
function showPrev() {
currentIndex = (currentIndex - 1 + items.length) % items.length;
lightboxImg.src = items[currentIndex].src;
lightboxImg.alt = items[currentIndex].alt;
}
function showNext() {
currentIndex = (currentIndex + 1) % items.length;
lightboxImg.src = items[currentIndex].src;
lightboxImg.alt = items[currentIndex].alt;
}
items.forEach(function (img, i) {
img.addEventListener('click', function () { openLightbox(i); });
});
closeBtn.addEventListener('click', closeLightbox);
prevBtn.addEventListener('click', showPrev);
nextBtn.addEventListener('click', showNext);
lightbox.addEventListener('click', function (e) {
if (e.target === lightbox) closeLightbox();
});
document.addEventListener('keydown', function (e) {
if (!lightbox.classList.contains('active')) return;
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowLeft') showPrev();
if (e.key === 'ArrowRight') showNext();
});
var touchStartX = 0;
lightbox.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].screenX;
});
lightbox.addEventListener('touchend', function (e) {
var touchEndX = e.changedTouches[0].screenX;
var diff = touchEndX - touchStartX;
if (Math.abs(diff) > 50) {
diff > 0 ? showPrev() : showNext();
}
});
}
function runWithRetry(fn, maxTries, interval) {
var tries = 0;
var t = setInterval(function () {
tries++;
var done = fn();
if (done || tries >= maxTries) clearInterval(t);
}, interval);
}
function build() {
var grids = findGrids();
if (!grids.length) return document.querySelectorAll('.customGalleryGrid').length > 0;
addStyleSheet(buildCss());
grids.forEach(function (grid, i) {
buildInstance(grid, i);
});
return true;
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () {
runWithRetry(build, MAX_TRIES, RETRY_INTERVAL);
});
} else {
runWithRetry(build, MAX_TRIES, RETRY_INTERVAL);
}
})();