Как сделать галерею в html и css

Создание галереи на HTML и CSS можно разбить на несколько шагов:

1. Начните с HTML-разметки, где вам нужно создать контейнер для галереи, заголовок и элементы фотографии. Например:

<div class="gallery-container">
  <h2>Галерея</h2>
  <div class="gallery-images">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <img src="img4.jpg" alt="Image 4">
  </div>
</div>

2. Добавьте стили CSS для вашей галереи, определите размер контейнера и стили фотографий. Например:

.gallery-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.gallery-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.gallery-images img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-images img:hover {
  transform: scale(1.1);
}

3. Добавьте логику JavaScript для масштабирования изображений. Например:

const images = document.querySelectorAll('.gallery-images img');
const modal = document.createElement('div');
modal.classList.add('modal');

let currentImage;

images.forEach((image, index) => {
  image.addEventListener('click', () => {
    currentImage = index + 1;
    modal.innerHTML = `
      <div class="modal-background"></div>
      <div class="modal-image">
        <img src="${image.src}" alt="${image.alt}">
        <button class="modal-close">&times;</button>
        <div class="modal-counter">${currentImage}/${images.length}</div>
      </div>
    `;

    document.body.appendChild(modal);

    modal.querySelector('.modal-background').addEventListener('click', closeModal);
    modal.querySelector('.modal-close').addEventListener('click', closeModal);
  });
});

function closeModal() {
  modal.style.display = 'none';
}

window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeModal();
  }
});

Основой этого кода является функция для масштабирования фотографий, которая добавляет в DOM элемент модального окна (элемент div с классом ‘modal’) и устанавливает значения для его содержимого. Обратите внимание на использование клавиши Esc для закрытия модального окна.

4. Добавьте стили CSS для модального окна. Например:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.modal-image {
  position: relative;
  z-index: 2;
}

.modal-image img {
  max-width: 100%;
  max-height: 100vh;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.modal-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
}

5. Настройте адаптивность своей галереи с помощью медиа-запросов в CSS, чтобы обеспечить ее оптимальное отображение на разных устройствах.

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