Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
    <style>
        /* Стили для всплывающего элемента */
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgb(192, 101, 101);
            padding: 10px;
            z-index: 1;
            display: none;
        }

        .popup img {
            max-width: 100%;
            max-height: 100%;
        }

        img {
            max-height: 400px; /* Максимальная высота изображения */
            height: auto; /* Автоматический расчет высоты для сохранения пропорций */
            width: 25%;
            object-fit: cover; /* Поддержка соотношения сторон без растягивания */
        }
    </style>
</head>

<body>

    <!-- HTML-разметка для изображений -->
    <img src="abu2.jpg" class="gallery-img" alt="Image 1">
    <img src="abu1.png" class="gallery-img" alt="Image 2">
    <!-- Добавьте другие изображения по вашему выбору -->

    <!-- Всплывающий элемент для увеличенной картинки -->
    <div class="popup" id="popup">
        <img src="" alt="Popup Image" id="popup-img">
    </div>

    <script>
        const galleryImages = document.querySelectorAll('.gallery-img');
        const popup = document.getElementById('popup');
        const popupImg = document.getElementById('popup-img');

        let scale = 1; // начальный масштаб
        galleryImages.forEach(img => {
            img.addEventListener('click', () => {
                scale = 1;
                popup.style.display = 'block';
                popupImg.src = img.src;
                popupImg.style.transform = `scale(${scale})`;
            });
        });

        popup.addEventListener('click', () => {
            popup.style.display = 'none';
        });

        const scaleStep = 0.5; // шаг изменения масштаба
        scale = 1;
        // Обработчик события прокрутки колесика мыши
        popup.addEventListener('wheel', (event) => {
            event.preventDefault();
            scale += event.deltaY > 0 ? -scaleStep : scaleStep; // изменение масштаба в зависимости от направления прокрутки
            scale = Math.max(0.5, Math.min(5, scale));
            popupImg.style.transform = `scale(${scale})`;
        });
    </script>

</body>

</html>