HTML · CSS · JavaScript

Интерактивная галерея проекта

Галерея экранов «Мерч в момент»: выбор кадра, увеличение, навигация стрелками и свайпом.

Дмитрий Лаврушин

Скачать пример Кейс проекта

Экран проекта, на котором основан пример.

Экраны «Мерч в момент»

Галерея проекта «Мерч в момент» — Галерея: крупный кадр позволяет рассмотреть предметы и нанесение.

Форматы работы проекта «Мерч в момент» — Форматы: отдельный кадр показывает, как поданы варианты услуги.

Механика услуги «Мерч в момент» — Механика: экран объясняет последовательность действий на мероприятии.

Где пригодится

Подходит для кейса, в котором нужно показать не один красивый экран, а последовательность решений: витрину, форматы и механику услуги. В примере используются опубликованные экраны «Мерч в момент».

Как устроен блок

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

Как добавить новые кадры

Добавьте figure с изображением, подписью и ссылкой на оригинал, затем кнопку с порядковым номером в data-gallery-thumb. Оставьте смысл в alt и подписи: они остаются доступными и без анимации.

Ключевой фрагмент

  const show = index => {
    current = (index + links.length) % links.length;
    const link = links[current];
    const label = link.closest("figure").querySelector("figcaption").textContent.trim();
    photo.src = link.href;
    photo.alt = link.querySelector("img").alt;
    caption.textContent = `${current + 1} / ${links.length} — ${label}`;
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
      photo.getAnimations().forEach(animation => animation.cancel());
      photo.animate([{ opacity: .45 }, { opacity: 1 }], { duration: 190 });
    }
  };

Скачать JavaScript · Скачать CSS · Полный пример с HTML и ресурсами