document.addEventListener("DOMContentLoaded", function () { /* --------------------------- GALERÍA: CAMBIO DE IMÁGENES ----------------------------*/ var thumbs = document.querySelectorAll(".thumb-img"); var mainWrapper = document.getElementById("main-image"); var mainImg = mainWrapper ? mainWrapper.querySelector("img") : null; if (mainImg && thumbs.length > 0) { thumbs.forEach(function (thumb, index) { thumb.style.cursor = "pointer"; thumb.addEventListener("click", function () { var newSrc = thumb.getAttribute("data-img"); if (newSrc) { mainImg.src = newSrc; mainImg.removeAttribute("srcset"); mainImg.removeAttribute("data-src"); mainImg.removeAttribute("data-srcset"); } }); }); } /* --------------------------- NAVEGACIÓN VERTICAL DE MINIATURAS ----------------------------*/ var scrollContainer = document.querySelector('.custom-thumbnails-scroll'); var arrowUp = document.querySelector('.arrow-up'); var arrowDown = document.querySelector('.arrow-down'); var thumbsArr = Array.prototype.slice.call(thumbs); var currentIndex = 0; function showImageAt(i) { if (!mainImg || !thumbsArr[i]) return; var newSrc = thumbsArr[i].getAttribute("data-img"); if (newSrc) { mainImg.src = newSrc; mainImg.removeAttribute("srcset"); mainImg.removeAttribute("data-src"); mainImg.removeAttribute("data-srcset"); } if (scrollContainer) { scrollContainer.scrollTo({ top: thumbsArr[i].offsetTop - scrollContainer.offsetTop, behavior: "smooth" }); } currentIndex = i; } thumbsArr.forEach(function (thumb, i) { thumb.addEventListener("click", function () { showImageAt(i); }); }); if (arrowUp) { arrowUp.addEventListener("click", function () { if (currentIndex > 0) showImageAt(currentIndex - 1); }); } if (arrowDown) { arrowDown.addEventListener("click", function () { if (currentIndex < thumbsArr.length - 1) showImageAt(currentIndex + 1); }); } showImageAt(0); /* --------------------------- ZOOM AL PASAR EL MOUSE ----------------------------*/ var wrapper = document.querySelector('.zoom-wrapper'); var image = wrapper ? wrapper.querySelector('.zoomable-image img') : null; if (wrapper && image) { wrapper.addEventListener('mousemove', function (e) { var rect = wrapper.getBoundingClientRect(); var x = ((e.clientX - rect.left) / rect.width) * 100; var y = ((e.clientY - rect.top) / rect.height) * 100; image.style.transformOrigin = x + "% " + y + "%"; image.style.transform = "scale(2)"; }); wrapper.addEventListener('mouseleave', function () { image.style.transform = "scale(1)"; image.style.transformOrigin = "center center"; }); } });