Современная галерея изображений в CSS
Это адаптивная галерея, которая выполнена в современном стиле, где в своем функционале имеет небольшие миниатюры, что создана при помощи CSS. Считаю такие функций отличной и удобной темой для пользователя, так в самой галереи можно разместить несколько изображений, что разделить по тематическому наклонению. Остается только сделать клик по миниатюре, где эта картинка автоматически выводится на экран.
Также понравилась адаптивность на этой галерее, ведь она создана отлично, где корректно можно смотреть картинке, как на большом мониторе, так и на самом маленьком экране.
Что для современного дизайн сайта станет отличным инструментом вывести на главной страницы как можно больше информации, виде изображение, что к нему закрепляем ссылку на переход, и сам каркас становится навигационным навигатором с красивым изображением.
Так выглядит галерея, после того, как установите на сайте:
Установочный процесс:
HTML
Код
Код <div class="galereya-kartinok"> <div class="kobaeudle-slayda"> <img src="http://zornet.ru/_fr/56/6665122.jpg" id="current"> </div> <div class="katunkamis"> <img src="http://zornet.ru/_fr/56/1166331.jpg"> <img src="http://zornet.ru/_fr/56/6303328.jpg"> <img src="http://zornet.ru/_fr/56/0019061.jpg"> <img src="http://zornet.ru/_fr/56/2044102.jpg"> <img src="http://zornet.ru/_fr/56/3133287.jpg"> <img src="http://zornet.ru/_fr/56/5368027.jpg"> <img src="http://zornet.ru/_fr/56/9063284.jpg"> <img src="http://zornet.ru/_fr/56/0816078.jpg"> </div> </div>
CSS
Код
Код body {
margin: 20px;
padding: 0;
background: #333;
}
.galereya-kartinok {
max-width: 760px;
margin: auto;
border: #fff solid 3px;
background: #fff;
}
.kobaeudle-slayda img,
.katunkamis img {
width: 100%;
}
.katunkamis {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in 1 forwards;
}
JS
Код
Код const current = document.querySelector("#current");
const katunkamis = document.querySelectorAll(".katunkamis img");
const opacity = 0.6;
katunkamis[0].style.opacity = opacity;
var thumbPointer = katunkamis[0];
katunkamis.forEach(img => img.addEventListener("click", imgClick));
function imgClick(e) {
current.src = e.target.src;
current.classList.remove("fade-in");
current.classList.add("fade-in");
e.target.style.opacity = opacity;
thumbPointer.style.opacity = 1;
thumbPointer = e.target;
}
Откровенно говоря, все очень просто выполнена по своему формату, но главное понятно, где мы наблюдаем в большом окне обзор, а в небольших, которые расположились под основой идет пред показ, что самостоятельно выбираем по дизайну, что вывести на основной экран.
Демонстрация
| 
