Как сделать - Галерею изображений вкладок
Узнать, как создать галерею изображений с вкладками с помощью CSS и JavaScript.
Галерея вкладок
Нажмите на изображение, чтобы развернуть его:
Природа
Создание галереи вкладок
Шаг 1) Добавить HTML:
Пример
<!-- Сетка: четыре столбца -->
<div class="row">
<div class="column">
<img src="img_nature.jpg" alt="Природа" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_snow.jpg" alt="Снег" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Горы" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_lights.jpg" alt="Северное сияние" onclick="myFunction(this);">
</div>
</div>
<!-- Расширяющийся контейнер изображений -->
<div class="container">
<!-- Закрытое изображение -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<!-- Развернутое изображение -->
<img id="expandedImg" style="width:100%">
<!-- Текст изображения -->
<div id="imgtext"></div>
</div>
Используйте изображения, чтобы развернуть конкретное изображение. Изображение, нажатое внутри столбца, отображается в контейнере под столбцами.
Шаг 2) Добавить CSS:
Создайте четыре столбца и стиль изображений:
Пример
/* Сетка: четыре одинаковых столбца, которые плавают рядом друг с другом */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Стиль изображения внутри сетки */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Очистить поплавки после столбцов */
.row:after {
content: "";
display: table;
clear: both;
}
/* Расширяющийся контейнер изображений (позиционирование необходимо для размещения кнопки закрытия и текста) */
.container {
position: relative;
display: none;
}
/* Расширение текста изображения */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Закрываемая кнопка внутри изображения */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
Шаг 3) Добавить JavaScript:
Пример
function myFunction(imgs) {
// Получить развернутое изображение
var expandImg = document.getElementById("expandedImg");
// Получить текст изображения
var imgText = document.getElementById("imgtext");
// Используйте тот же src в развернутом изображении, что и изображение, нажатое на сетке
expandImg.src = imgs.src;
// Используйте значение атрибута alt кликабельного изображения в качестве текста внутри развернутого изображения
imgText.innerHTML = imgs.alt;
// Показать элемент контейнера (скрытый с помощью CSS)
expandImg.parentElement.style.display = "block";
}
Редактор кода »
