« Адаптивная галерея изображений, с использованием CSS, HTML и JS »

Описание материала:

По сути, галерея представляет собой витрину изображений на веб-сайтах, где пользователи могут видеть все изображения. В основном, есть 8 маленьких блоков для миниатюр и большой блок для отображения выбранного или активного изображения. Существует макет сетки, где 8 маленьких изображений размещены снизу, для предварительного просмотра, а большое изображение размещено над полями предварительного просмотра. Вы можете просто выбрать изображение, щелкнув по нему, и выбранное изображение будет отображаться в поле большой сетки.

В данной галереи мы использовали HTML для создания макета, CSS для стилей и адаптивного дизайна, JavaScript для работы. Это короткая, но полезная программа. Если вы сейчас думаете, как на самом деле выглядит эта галерея изображений, посмотрите предварительный просмотр, перейдя по ссылке демонстрация, её вы найдете снизу после описания к материалу.

Установка:

HTML код:

Код
<div class="ufive-images">
  <div class="main-img">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_0.jpg" id="current">
  </div>

  <div class="imgs">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_0.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_8.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_7.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_6.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_5.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_4.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_3.jpg">
  <img src="http://ufive.ru/demo_file/img_demo/ufive_1.jpg">
  </div>
</div>


CSS код:
Код
.ufive-images {
  max-width: 700px;
  margin: auto;
  border: #f3be81 solid 3px;
  background: #f3be81;
}

.main-img img,
.imgs img {
  width: 100%;
}

.imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.imgs img {
  cursor: pointer;
}

.fade-in {
  opacity: 0;
  animation: fadeIn var(--fade-time) ease-in 1 forwards;
}

@media(max-width: 600px) {
  .imgs {
  grid-template-columns: repeat(2, 1fr);
  }
}


JS код:
Код
const current = document.querySelector('#current');
const imgs = document.querySelector('.imgs');
const img = document.querySelectorAll('.imgs img');
const opacity = 0.6;

img[0].style.opacity = opacity;

imgs.addEventListener('click', imgClick);

function imgClick(e) {
  img.forEach(img => (img.style.opacity = 1));
  current.src = e.target.src;
  current.classList.add('fade-in');
  setTimeout(() => current.classList.remove('fade-in'), 500);
  e.target.style.opacity = opacity;
}


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 93


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar