document.addEventListener('DOMContentLoaded', function() { var zoomableImages = document.querySelectorAll('.t-zoomable'); var overlay = document.createElement('div'); overlay.className = 'zoom-overlay'; document.body.appendChild(overlay); var zoomableImage = new Image(); overlay.appendChild(zoomableImage); var bulletsContainer = document.createElement('div'); bulletsContainer.className = 'zoom-bullets'; overlay.appendChild(bulletsContainer); var currentImageIndex = -1; // Создание индикаторов (bullets) zoomableImages.forEach(function(image, index) { var bullet = document.createElement('div'); bullet.className = 't-bullet'; bullet.addEventListener('click', function() { openImage(index); }); bulletsContainer.appendChild(bullet); }); function openImage(index) { currentImageIndex = index; loadImage(currentImageIndex); overlay.style.display = 'flex'; updateBullets(); } overlay.addEventListener('click', function() { overlay.style.display = 'none'; }); document.addEventListener('keydown', function(event) { if (overlay.style.display === 'flex') { if (event.key === 'ArrowRight') { currentImageIndex = (currentImageIndex + 1) % zoomableImages.length; loadImage(currentImageIndex); updateBullets(); } else if (event.key === 'ArrowLeft') { currentImageIndex = (currentImageIndex - 1 + zoomableImages.length) % zoomableImages.length; loadImage(currentImageIndex); updateBullets(); } } }); function loadImage(index) { var imgSrc = zoomableImages[index].dataset.imgZoomUrl; zoomableImage.src = imgSrc; zoomableImage.onload = function() { console.log("Image loaded successfully: " + imgSrc); }; zoomableImage.onerror = function() { console.error("Error loading image: " + imgSrc); }; } function updateBullets() { var bullets = document.querySelectorAll('.t-bullet'); bullets.forEach(function(bullet, index) { bullet.classList.toggle('active', index === currentImageIndex); }); } // Загрузка изображений сразу zoomableImages.forEach(function(image, index) { var img = new Image(); img.src = image.dataset.imgZoomUrl; // Загрузка всех изображений при старте image.addEventListener('click', function(event) { event.preventDefault(); openImage(index); }); }); });