Создание простой галереи изображений с помощью HTML, CSS и JavaScript

Галерея изображений — это полезный инструмент для упорядоченного отображения коллекции изображений. В этой статье мы рассмотрим, как создать простую галерею изображений с помощью HTML, CSS и JavaScript.

Для начала мы создадим структуру HTML для галереи изображений. Мы будем использовать элемент div для упаковки галереи и серию элементов img для хранения изображений:

<div class="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

Далее мы стилизуем галерею изображений с помощью CSS. Мы добавим элементу .image-gallery отступ и цвет фона:

.image-gallery {
  padding: 20px;
  background-color: #eee;
}

Мы также стилизуем элементы img, чтобы они имели отступы и границу:

.image-gallery img {
  display: block;
  margin: 10px auto;
  width: 50%;
  border: 1px solid #ccc;
}

Теперь, когда у нас есть основные стили, давайте добавим JavaScript для реализации функциональности галереи изображений. Мы будем хранить ссылку на галерею изображений и изображения в переменных:

const gallery = document.querySelector('.image-gallery');
const images = gallery.querySelectorAll('img');

Мы также добавим прослушиватели событий к изображениям для обработки события клика и открытия полноразмерной версии изображения в модальном окне:

images.forEach((image) => {
  image.addEventListener('click', () => {
    const modal = document.createElement('div');
    modal.classList.add('modal');
    modal.innerHTML = `
      <img src="${image.src}" alt="${image.alt}">
      <p>${image.alt}</p>
      <button>Close</button>
    `;
    document.body.appendChild(modal);
  });
});

Мы также добавим немного CSS для стилизации модального окна:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 999;
}

.modal img {
  width: 50%;
  margin-bottom: 20px;
}
.modal p {
  color: white;
  margin-bottom: 20px;
}
.modal button {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
}

Наконец, мы добавим прослушиватель событий в модальное окно, чтобы обрабатывать событие клика и закрывать модальное окно при нажатии кнопки закрытия:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    const modal = event.target.parentElement;
    document.body.removeChild(modal);
  }
});

Благодаря этим изменениям наша галерея изображений теперь работает и позволяет пользователям просматривать полноразмерные версии изображений в модальном режиме.