(function () { const gallery = document.getElementById('floorboss-gallery'); if (!gallery || gallery.dataset.ready) return; gallery.dataset.ready = 'true'; const track = gallery.querySelector('.fb-gallery-images'); const lightbox = gallery.querySelector('.fb-lightbox'); const largeImage = gallery.querySelector('.fb-lightbox-image'); const counter = gallery.querySelector('.fb-counter'); const originals = Array.from(track.querySelectorAll('img')); const count = originals.length; let current = 0; let cycleWidth = 0; let startOffset = 0; let correcting = false; let previousBodyOverflow = ''; // Give every original photo a permanent index originals.forEach(function (photo, index) { photo.dataset.photoIndex = index; }); // Add a duplicate set before the originals const before = document.createDocumentFragment(); originals.slice().reverse().forEach(function (photo) { const clone = photo.cloneNode(true); clone.dataset.photoIndex = photo.dataset.photoIndex; clone.dataset.loopClone = 'true'; clone.loading = 'eager'; before.appendChild(clone); }); track.insertBefore(before, track.firstChild); // Add a duplicate set after the originals originals.forEach(function (photo) { const clone = photo.cloneNode(true); clone.dataset.photoIndex = photo.dataset.photoIndex; clone.dataset.loopClone = 'true'; clone.loading = 'eager'; track.appendChild(clone); }); // Calculate the position and width of one complete photo set function measureLoop() { const first = originals[0]; const last = originals[count - 1]; const firstRect = first.getBoundingClientRect(); const lastRect = last.getBoundingClientRect(); const trackRect = track.getBoundingClientRect(); const style = getComputedStyle(track); const gap = parseFloat(style.columnGap || style.gap) || 0; cycleWidth = lastRect.right - firstRect.left + gap; startOffset = firstRect.left - trackRect.left + track.scrollLeft; track.style.scrollBehavior = 'auto'; track.scrollLeft = startOffset; requestAnimationFrame(function () { track.style.scrollBehavior = 'smooth'; }); } // Silently jump between identical photo sets function checkLoop() { if (correcting || !cycleWidth) return; const position = track.scrollLeft; if (position < startOffset - 1) { correctPosition(position + cycleWidth); } else if (position >= startOffset + cycleWidth - 1) { correctPosition(position - cycleWidth); } } function correctPosition(position) { correcting = true; track.style.scrollBehavior = 'auto'; track.scrollLeft = position; requestAnimationFrame(function () { track.style.scrollBehavior = 'smooth'; correcting = false; }); } // Set the starting position after the duplicate images are added requestAnimationFrame(measureLoop); track.addEventListener('scroll', checkLoop, { passive: true }); // Move the thumbnail carousel one photo at a time function moveCarousel(direction) { const first = originals[0]; const style = getComputedStyle(track); const gap = parseFloat(style.columnGap || style.gap) || 0; const step = first.getBoundingClientRect().width + gap; track.scrollBy({ left: direction * step, behavior: 'smooth' }); } gallery.querySelector('.fb-left').addEventListener('click', function () { moveCarousel(-1); }); gallery.querySelector('.fb-right').addEventListener('click', function () { moveCarousel(1); }); // Enlarged photo controls function showPhoto(index) { current = (index + count) % count; largeImage.src = originals[current].src; largeImage.alt = originals[current].alt; counter.textContent = (current + 1) + ' / ' + count; } function openLightbox(index) { showPhoto(index); previousBodyOverflow = document.body.style.overflow; lightbox.classList.add('fb-open'); lightbox.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; } function closeLightbox() { lightbox.classList.remove('fb-open'); lightbox.setAttribute('aria-hidden', 'true'); document.body.style.overflow = previousBodyOverflow; } function changePhoto(direction) { showPhoto(current + direction); } // One click handler works for original and duplicated photos track.addEventListener('click', function (event) { const photo = event.target.closest('img'); if (!photo || !track.contains(photo)) return; openLightbox(Number(photo.dataset.photoIndex)); }); gallery.querySelector('.fb-close').addEventListener('click', closeLightbox); gallery.querySelector('.fb-prev').addEventListener('click', function () { changePhoto(-1); }); gallery.querySelector('.fb-next').addEventListener('click', function () { changePhoto(1); }); // Close when tapping the dark background lightbox.addEventListener('click', function (event) { if (event.target === lightbox) { closeLightbox(); } }); // Keyboard controls document.addEventListener('keydown', function (event) { if (!lightbox.classList.contains('fb-open')) return; if (event.key === 'Escape') closeLightbox(); if (event.key === 'ArrowLeft') changePhoto(-1); if (event.key === 'ArrowRight') changePhoto(1); }); // Swipe through enlarged photos let touchStart = 0; lightbox.addEventListener('touchstart', function (event) { touchStart = event.changedTouches[0].clientX; }, { passive: true }); lightbox.addEventListener('touchend', function (event) { const distance = event.changedTouches[0].clientX - touchStart; if (Math.abs(distance) > 50) { changePhoto(distance < 0 ? 1 : -1); } }, { passive: true }); // Recalculate if the screen changes size window.addEventListener('resize', function () { requestAnimationFrame(measureLoop); }); })();
LOOKING FOR THE PERFECT FLOORING?At The Floor Boss, we bring the showroom to your doorstep!
We’re a family-run mobile flooring business dedicated to helping you find the perfect flooring to suit your home, style and budget.With a wide range of samples to choose from, you can explore your options and find your ideal flooring in the comfort of your own home, with friendly, personal service every step of the way.With 5-star reviews and recommendations from happy customers, you can feel confident you’re in good hands.Ready to transform your home?
Use our booking link below to start your journey.
© 2026 The Floor Boss. All rights reserved.
