ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Современная галерея изображений в CSS

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

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

Также понравилась адаптивность на этой галерее, ведь она создана отлично, где корректно можно смотреть картинке, как на большом мониторе, так и на самом маленьком экране.

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

Так выглядит галерея, после того, как установите на сайте:

Установочный процесс:

HTML

Код

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;
}

Код

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;
}

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

Демонстрация

22 Сентября 2019 Загрузок: 3 Просмотров: 2922 Комментариев: (3)

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

СКАЧАТЬ

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

Kosten

Комментарии: 3
Порядок вывода комментариев: maniacvn 23 Сентября 2019 10:34¹ 0 Можно использовать для вывода скриншотов Kosten 23 Сентября 2019 19:06² 0 А не проще сделать примерно как на кино сайтах, искал на сайте не нашел, но потом размещу. Kosten 23 Сентября 2019 20:48³ 0 Также можно посмотреть еще один вариант по установки изображение под плеером или материалом, что в горизонтальном виде представлено. Перейти на материал