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

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

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

Однострочное описание задачи

Сделать страницу с большим центральным изображением и рядом миниатюр под ним. При клике на миниатюру центральное изображение меняется на выбранное.

Файлы и структура проекта

Рекомендуемая структура папок:

• index.html
• styles.css
• script.js
• images/
  • image1.jpg
  • image2.jpg
  • …
  • image10.jpg

Создайте папку images и положите туда несколько файлов. Переименуйте их в image1.jpg — image10.jpg или подставьте свои имена, но соответствующим образом измените ссылки в коде.

1. HTML: базовая разметка и контейнер галереи

Создайте файл index.html и вставьте эту минимальную структуру. Код прост и понятен для адаптации.

  
    
    
    
    
  
  
    

      
Галерея изображений
      
Нажмите на миниатюру ниже, чтобы увидеть изображение в увеличенном виде.
    

    

      

        
      

      

    

    
  

Важно: атрибуты alt у изображений — для доступности и SEO. Старайтесь давать осмысленные краткие описания.

2. CSS: стили для центрального изображения и миниатюр

Файл styles.css определяет базовый внешний вид. Ниже — простой, понятный набор правил. Вы можете расширять его: добавить тени, плавные переходы или адаптивную верстку.

/* styles.css */
.intro {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  padding: 20px 10px;
}

h2 {
  font-size: 32px;
  margin: 0 0 6px 0;
}

p {
  font-size: 14px;
  color: #444;
}

#image-gallery {
  width: 90%;
  max-width: 800px;
  margin: 18px auto;
}

#image-gallery figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

#current-image {
  width: 100%;
  height: auto;
  display: block;
}

#image-thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-bottom: 8px;
}

.thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  border: 2px solid transparent;
}

.thumb:focus,
.thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.thumb[aria-current="true"] {
  border-color: #2d9cdb;
}

@media (max-width: 480px) {
  .thumb { width: 60px; height: 60px; }
  h2 { font-size: 22px; }
}

Примечание: использование overflow-x позволяет прокручивать миниатюры на узких экранах.

3. JavaScript: динамическая генерация миниатюр и обработка кликов

Создайте файл script.js и вставьте этот код. Он автоматически добавит 10 миниатюр и установит обработчики кликов.

// script.js
var imageThumbs = document.getElementById('image-thumbs');
var currentImage = document.getElementById('current-image');
var totalImages = 10; // можно изменить, если у вас другое количество файлов

for (var i = 1; i <= totalImages; i++) {
  var thumb = document.createElement('img');
  thumb.src = 'images/image' + i + '.jpg';
  thumb.alt = 'Миниатюра изображения ' + i;
  thumb.classList.add('thumb');
  thumb.setAttribute('tabindex', '0');
  thumb.dataset.index = i;

  // Пометить первую миниатюру как текущую
  if (i === 1) {
    thumb.setAttribute('aria-current', 'true');
  }

  // Клик по миниатюре меняет главное изображение
  thumb.addEventListener('click', function() {
    currentImage.src = this.src;
    currentImage.alt = this.alt;
    // обновляем состояния aria на миниатюрах
    var prev = imageThumbs.querySelector('[aria-current="true"]');
    if (prev) prev.removeAttribute('aria-current');
    this.setAttribute('aria-current', 'true');
  });

  // Поддержка клавиатуры: Enter или пробел
  thumb.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      this.click();
    }
  });

  imageThumbs.appendChild(thumb);
}

Важно: код минимален и не использует фреймворков. Для больших проектов лучше управлять списком изображений через массив объектов (src, alt, caption).

Доступность и SEO: базовые рекомендации

• Всегда добавляйте осмысленные alt для изображений. Если изображение — декоративное, используйте пустой alt=””.
• Делайте миниатюры фокусируемыми (tabindex=”0”) и поддерживайте клавиатуру.
• Используйте semantic HTML: figure/figcaption для подписей.

Как расширить галерею — варианты и идеи

1. Lightbox: при клике открывайте изображение в модальном окне с затемнением. Это улучшит просмотр в полноэкранном режиме.
2. Прелоадинг: заранее подгружайте изображения рядом с текущим, чтобы переключение было мгновенным.
3. Lazy loading: для очень длинных списков используйте loading=”lazy” на img или IntersectionObserver.
4. Пагинация или карусель: если миниатюр тысячи, показывайте порцию и подгружайте остальные по мере необходимости.
5. Подписи и метаданные: храните подписи в JSON и отображайте figcaption.

Контроль качества: тесты и критерии приёмки

Критерии приёмки

• При открытии страницы отображается image1.jpg как главное изображение.
• Под главным изображением появилось ровно столько миниатюр, сколько указано в totalImages.
• Клик по миниатюре меняет src и alt основного изображения.
• Миниатюры доступны с клавиатуры (Tab + Enter/Space переключают изображение).

Примеры тест‑кейсов

• Открыть страницу в мобильном браузере: миниатюры прокручиваются горизонтально.
• Нажать на третью миниатюру: основное изображение меняется на image3.jpg.
• Навигация через клавиатуру: Tab → Enter на миниатюре — изображение сменилось.

Когда такой подход не подходит — контрпримеры

• Нужна галерея с фильтрами, тэгами и тысячами изображений. В этом случае лучше использовать компонентную архитектуру и серверную пагинацию.
• Требуется сложная анимация переходов и полноэкранная работа с EXIF — нужен готовый плагин или библиотека (например, PhotoSwipe, Lightbox).

Быстрый чек‑лист перед доставкой проекта

• alt заполнены у всех изображений
• сжатие изображений (webp/AVIF) настроено
• тесты на мобильных разрешениях пройдены
• fallback: проверка отсутствия изображений (onerror)

Минимальная методология разработки (ручной SOP)

1. Подготовьте набор изображений и положите в images/.
2. Напишите и проверьте index.html с подключением стилей и скриптов.
3. Локально проверьте поведение галереи в Chrome/Firefox/Safari.
4. Протестируйте доступность: Tab, Enter, проверка alt.
5. Оптимизируйте изображения и выпустите на прод.

Маленькая галерея улучшений (cheat sheet)

• Добавить loading=”lazy” к миниатюрам при большом количестве.
• Использовать picture + source для адаптивных форматов.
• Для плавных переходов менять opacity + transition и минимально менять src после загрузки.

Короткий глоссарий (1 строка)

• Миниатюра: уменьшенная версия изображения, служащая для предварительного просмотра.
• Lightbox: модальное окно для просмотра изображения в увеличенном виде.
• Lazy loading: отложенная загрузка ресурсов по мере необходимости.

Итог

Эта инструкция даёт минимально рабочую галерею с акцентом на простоту, доступность и расширяемость. Начните с этого шаблона, затем добавляйте прелоадинг, lightbox или интеграцию с API изображений по мере роста требований.

Важно: адаптируйте количество изображений и пути к ним под ваш проект. Маленькие улучшения — aria‑атрибуты, клавиатурная навигация и оптимизация картинок — делают галерею заметно лучше для всех пользователей.