Эффект увеличивающегося изображения при клике на 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">×</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 можно создать
нечто вроде галереи изображении.
