Галерея

Галерея — это две вещи: сетка маленьких картинок и окно, в котором открывается большая. Обе делаются почти без кода: сетку раскладывает CSS, а окно умеет сам браузер — для этого есть тег <dialog>.

Когда галерея, а когда просто картинки

Если снимков три-четыре и каждый что-то объясняет, ставьте их прямо в текст: разглядывать их отдельно никто не будет. Галерея нужна, когда снимков десяток и больше, они равнозначны, а подробности видны только на большом размере, — фотографии, работы, скриншоты.

Разметка: сетка ссылок, а не сетка картинок

Главный приём здесь такой: превью оборачивается ссылкой на большой файл. Тогда галерея работает даже с выключенным JavaScript — щелчок просто откроет снимок отдельной страницей. Скрипт потом перехватит этот щелчок и покажет окно.

<ul class="gallery">
  <li class="gallery__item">
    <a class="gallery__link" href="/assets/img/work-1.webp" data-lightbox>
      <img src="/assets/img/work-1-thumb.webp"
           width="400" height="300" loading="lazy"
           alt="Главная страница сайта школы: шапка и первый экран">
    </a>
  </li>
</ul>

Атрибуты width и height обязательны, даже если размер задан в CSS. Браузер по ним заранее оставляет место под картинку, и текст под галереей не прыгает, пока снимки грузятся. А loading="lazy" откладывает загрузку тех, до которых читатель ещё не долистал.

Окно увеличения: готовый тег вместо своего кода

Самодельное окно из <div> нужно учить четырём вещам: закрываться по Esc, не выпускать фокус наружу, возвращать фокус на ту картинку, с которой открылось, и затемнять страницу. Тег <dialog>, открытый методом showModal, делает всё это сам.

const box = document.createElement('dialog');
box.className = 'lightbox';
box.innerHTML = '<img class="lightbox__img" alt="">';
document.body.append(box);

document.addEventListener('click', (event) => {
  const link = event.target.closest('a[data-lightbox]');
  if (!link) return;

  event.preventDefault();                  // не уходим на страницу снимка
  const img = box.querySelector('img');
  img.src = link.href;
  img.alt = link.querySelector('img').alt; // подпись берём у превью
  box.showModal();                         // Esc и возврат фокуса — сами
});

// щелчок по затемнению закрывает окно
box.addEventListener('click', (event) => {
  if (event.target === box) box.close();
});

Обработчик висит на всём документе, а не на каждой ссылке: так галерея переживёт добавление снимков скриптом и не потребует переподписки. Затемнение настраивается псевдоэлементом ::backdrop — это тоже готовая возможность браузера.

Вес страницы: превью — это отдельный файл

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

Что попросить у нейросети

Галерея из Evolution CMS

Снимки в CMS хранят двумя способами. Первый — TV-поле типа «изображение» с возможностью добавлять строки: вся галерея лежит в одной странице, и редактор добавляет снимки кнопкой «Добавить». Второй — папка ресурсов, где каждый снимок отдельная запись с описанием и датой.

В обоих случаях разметку одного снимка задаёт чанк — та же, что в первом блоке кода, только с метками полей вместо настоящих адресов. Превью при этом делает не редактор вручную: уменьшенную копию строит phpThumb, которому передают нужную ширину.

Частые ошибки