» »

Современная галерея изображений в CSS

Современная галерея изображений в CSS
Это адаптивная галерея, которая выполнена в современном стиле, где в своем функционале имеет небольшие миниатюры, что создана при помощи 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;
}

Откровенно говоря, все очень просто выполнена по своему формату, но главное понятно, где мы наблюдаем в большом окне обзор, а в небольших, которые расположились под основой идет пред показ, что самостоятельно выбираем по дизайну, что вывести на основной экран.

Демонстрация
2019-09-22 Загрузок: 1 Просмотров: 387 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 3
maniacvn
maniacvn 2019-09-23 10:341
0
Можно использовать для вывода скриншотов 07a
Kosten
Kosten 2019-09-23 19:062
0
А не проще сделать примерно как на кино сайтах, искал на сайте не нашел, но потом размещу.

Kosten
Kosten 2019-09-23 20:483
0
Также можно посмотреть еще один вариант по установки изображение под плеером или материалом, что в горизонтальном виде представлено.



Перейти на материал
avatar