<%*
const intervalId = setInterval(() => {
const images = document.querySelectorAll('img[alt="click-zoom"]:not([data-zoom-enabled])');
images.forEach(img => {
img.setAttribute('data-zoom-enabled', 'true'); // mark as done
img.style.cursor = 'zoom-in';
img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
img.addEventListener('mouseenter', () => {
img.style.transform = 'scale(1.05)';
img.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.4)';
});
img.addEventListener('mouseleave', () => {
img.style.transform = 'scale(1)';
img.style.boxShadow = 'none';
});
img.addEventListener('click', () => {
const overlay = document.createElement('div');
overlay.style = `
position: fixed; top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0,0,0,0.8);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
cursor: zoom-out;
`;
const zoomImg = document.createElement('img');
zoomImg.src = img.src;
zoomImg.style = `
max-width: 90vw;
max-height: 90vh;
border-radius: 8px;
box-shadow: 0 0 30px #000;
`;
overlay.appendChild(zoomImg);
overlay.addEventListener('click', () => overlay.remove());
document.body.appendChild(overlay);
});
});
}, 100);
%>