(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); } })();