document.addEventListener('DOMContentLoaded', function () { // Najdeme vsetky obrazky vo widgetoch s class js-case-image const widgets = document.querySelectorAll('.js-case-image img, img.js-case-image'); if (!widgets.length) return; // Vytvorime overlay len raz const overlay = document.createElement('div'); overlay.className = 'case-overlay'; const overlayImg = document.createElement('img'); overlayImg.className = 'case-overlay__image'; overlay.appendChild(overlayImg); const closeBtn = document.createElement('button'); closeBtn.className = 'case-overlay__close'; closeBtn.innerHTML = '×'; overlay.appendChild(closeBtn); document.body.appendChild(overlay); let isAnimating = false; function openFromThumb(img) { if (isAnimating) return; isAnimating = true; const rect = img.getBoundingClientRect(); const scrollY = window.scrollY || window.pageYOffset; const scrollX = window.scrollX || window.pageXOffset; // Nastavime rovnaky src overlayImg.src = img.src; // Zaciatocna pozicia - presne kde je thumbnail overlayImg.style.top = rect.top + scrollY + 'px'; overlayImg.style.left = rect.left + scrollX + 'px'; overlayImg.style.width = rect.width + 'px'; overlayImg.style.height = rect.height + 'px'; // Zobrazime overlay overlay.style.display = 'block'; // Pockame jeden frame aby browser precital start poziciu requestAnimationFrame(function () { overlay.classList.add('is-active'); // Cielova pozicia = full screen const vw = window.innerWidth; const vh = window.innerHeight; overlayImg.style.top = scrollY + 'px'; overlayImg.style.left = scrollX + 'px'; overlayImg.style.width = vw + 'px'; overlayImg.style.height = vh + 'px'; setTimeout(function () { isAnimating = false; }, 500); }); } function closeOverlay() { if (isAnimating) return; isAnimating = true; overlay.classList.remove('is-active'); // Po fade-out len skryjeme overlay (nerobime shrink-back animaciu) setTimeout(function () { overlay.style.display = 'none'; isAnimating = false; }, 350); } // klik na kazdy thumbnail widgets.forEach(function (img) { img.addEventListener('click', function (e) { e.preventDefault(); openFromThumb(img); }); }); // zavretie na Xko closeBtn.addEventListener('click', function (e) { e.stopPropagation(); closeOverlay(); }); // zavretie klikom mimo obrazku overlay.addEventListener('click', function (e) { if (e.target === overlay) { closeOverlay(); } }); });

Kontakt

Kreatívne riešenia pre váš biznis

Nájdite tu naše kontaktné údaje pre rýchly a pohodlný kontakt s nami.