Эффект увеличивающегося изображения при клике на CSS И JavaScript

Заработок в интернете / От

Эффект увеличивающегося изображения при клике на CSS И JavaScript

Доброго времени суток! В примере ниже мы рассмотрим с Вами скрипт, который при клике по изображению отображает его в увеличенном виде в модальном окне на странице. При клике в любой части страницы, кроме самого изображения, изображение уменьшается.

Код:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Пример модального окна с изображением</title>
    <style>

        /* Стили для модального окна */
        .modal {
            display: none;
            /* По умолчанию скрыто */
            position: fixed;
            /* Фиксированное положение */
            z-index: 1;
            /* Верхний уровень */
            left: 0;
            top: 0;
            width: 100%;
            /* Полная ширина */
            height: 100%;
            /* Полная высота */
            overflow: auto;
            /* Включить прокрутку, если необходимо */
            background-color: rgba(0, 0, 0, 0.9);
            /* Черный цвет с прозрачностью */
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 30%;
            max-width: 700px;
        }

        .modal-content img {
            width: 100%;
            height: auto;
        }

        /* Стили для изображения */
        img {
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
            width: 100%;
        }

        img:hover {
            opacity: 0.7;
        }

        .images {
            width: 450px;
            display: flex;
        }

    </style>
</head>

<body>
    <h2>Пример модального окна с изображением</h2>

    <!-- Изображения нужно добавлять в этот блок -->
    <div class="images">
        <img src="https://myrusakov.ru/images/ue5-cover.png" alt="Image" onclick="displayModal(this);">
        <img src="https://myrusakov.ru/images/cppue5-cover.png" alt="Image" onclick="displayModal(this);">
        <img src="https://srs.myrusakov.ru/images/laravel-cover.png" alt="Image" onclick="displayModal(this);">
    </div>

    <!-- Модальное окно -->
    <div id="modal" class="modal" onclick="hideModal();">
      <span class="close">&times;</span>
      <div class="modal-content">
        <img id="modal-image">
      </div>
    </div>

    <script>
        // Получаем элементы модального окна и изображения
        const modal = document.getElementById("modal");
        const modalImage = document.getElementById("modal-image");

        // Отображаем модальное окно и устанавливаем источник изображения
        function displayModal(img) 
        {
            modal.style.display = "block";
            modalImage.src = img.src;
        }

        // Скрываем содержимое модального окна, если пользователь кликнул вне его
        function hideModal() 
        {   
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

</html>

Таким образом, с помощью вот такого простого кода на CSS и JavaScript можно создать нечто вроде галереи изображении.

Источник

Shopping Cart