Лайтбокс на Чистом JavaScript: Пошаговое Руководство для Веб-Мастера

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

Раньше подобные решения строились на библиотеке jQuery, однако современная разработка всё чаще обходится без неё. Чистый JavaScript работает заметно быстрее, не требует загрузки лишних сотен килобайт и легко интегрируется в проекты на любом фреймворке или CMS. Если вы ведёте собственный блог о компьютерах и софте, как, например, автор этого ресурса, или просто поддерживаете сайт с портфолио, отказ от jQuery станет разумным шагом в сторону производительности и долгосрочной поддержки кода.

В материале разберём весь процесс от разметки до финального скрипта. Мы не будем подключать сторонние зависимости и ограничимся только HTML, CSS и ванильным JS. Полученный лайтбокс сможет открывать полноразмерные изображения, переключаться между ними с клавиатуры и корректно работать на мобильных устройствах.

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

Разметка Галереи на HTML

Любой лайтбокс начинается с правильно подготовленной разметки. Создайте контейнер с классом gallery и разместите внутри него ссылки, каждая из которых оборачивает миниатюру. В атрибуте href укажите путь к полноразмерному файлу, а в src тега img — путь к уменьшенной копии. Такой подход позволяет браузеру отдавать разные изображения для предпросмотра и полного просмотра, экономя трафик.

Обязательно добавьте каждой ссылке атрибут data-full или положите полный URL прямо в href, чтобы JavaScript мог получить адрес большой картинки в момент клика. Если миниатюра и оригинал совпадают, лайтбокс всё равно будет работать, просто без дополнительной оптимизации. Для группы изображений, которые листаются стрелками, используйте data-атрибут data-group с одинаковым значением, например gallery-1.

Сразу после контейнера с миниатюрами добавьте пустой блок lightbox, который изначально скрыт. Внутри разместите затемняющий overlay, контейнер для самой картинки, подпись, кнопку закрытия и стрелки навигации. Такая структура упрощает стилизацию и делает код читаемым даже спустя месяцы после публикации.

Стилизация Модального Окна на CSS

Переходим к оформлению. Контейнер lightbox фиксируется на весь экран с помощью position fixed, координат top, left, right, bottom равных нулю и высокого z-index, чтобы окно гарантированно перекрывало остальной контент. По умолчанию он скрыт через display none, а при активации получает класс is-open, который меняет отображение на flex или grid.

Фон overlay красится в полупрозрачный чёрный цвет, например rgba(0, 0, 0, 0.85), чтобы сосредоточить внимание пользователя на изображении и скрыть детали страницы. Сама картинка центрируется через flex или grid, ограничивается по максимальной ширине и высоте через max-width 90vw и max-height 85vh. Так снимок любого размера аккуратно впишется в окно браузера и не будет обрезаться на узких экранах.

Кнопки закрытия и навигации располагаются по краям экрана. Крестик принято ставить в правом верхнем углу, стрелки — по центру левого и правого края. Чтобы элементы не сливались с тёмным фоном, используйте светлый цвет и небольшую тень. Для мобильных устройств увеличьте размер кликабельной области как минимум до 44 пикселей, иначе нажимать пальцем будет неудобно.

Открытие и Закрытие Лайтбокса

Логика работы начинается с поиска всех ссылок внутри контейнера gallery. Перебирайте их циклом forEach и навешивайте обработчик клика через addEventListener. Внутри обработчика вызовите event.preventDefault, чтобы браузер не перешёл по адресу из href, после чего передайте полный URL картинки в функцию открытия.

Функция openLightbox должна снять класс скрытия с контейнера, записать путь изображения в src тега img внутри модального окна и обновить подпись, если она задана. Сохраните ссылку на текущий элемент галереи в переменной, чтобы потом знать, какое изображение было открыто. Это пригодится для навигации между снимками и возврата фокуса.

Закрытие реализуется тремя способами: клик по крестику, клик по затемнённому фону и нажатие клавиши Escape. Каждый из них вызывает одну и ту же функцию closeLightbox, которая возвращает модальному окну скрытое состояние, очищает src картинки и возвращает фокус на ту миниатюру, с которой пользователь начинал просмотр. Возврат фокуса — важная часть доступности, о которой поговорим подробнее далее.

Навигация Между Изображениями и Поддержка Клавиатуры

Если в галерее несколько снимков, посетитель ожидает возможность листать их, не закрывая окно. Реализуется это просто: в функции openLightbox соберите все ссылки той же группы в массив, найдите индекс текущего элемента и сохраните его в переменной. После этого обработчики на стрелках «вперёд» и «назад» будут менять индекс по кругу и подставлять новое изображение в модальное окно без перезагрузки.

Клавиатурная навигация добавляется через общий слушатель keydown на документе. Проверяйте, открыт ли лайтбокс в данный момент, и реагируйте на ArrowRight, ArrowLeft и Escape. Для пользователей, которые привыкли перелистывать фотографии стрелками, это станет приятным бонусом и покажет продуманность интерфейса.

Не забудьте про тач-события. На смартфонах и планшетах удобнее свайпать. Отлавливайте события touchstart и touchend, вычисляйте разницу по горизонтали и при достаточном смещении переключайте картинку. Этот жест интуитивно понятен и не требует дополнительных подсказок.

Адаптивность, Доступность и Тонкости Оптимизации

На маленьких экранах скрывайте подписи и уменьшайте отступы от краёв, чтобы максимум пространства осталось самому изображению. Используйте медиа-запросы вроде @media (max-width: 600px) и ориентируйтесь на реальное поведение элементов при тестировании в инструментах разработчика. Не забывайте про portrait-ориентацию: на узких экранах высота картинки часто важнее ширины.

Доступность — момент, который многие упускают. Добавьте контейнеру лайтбокса атрибут role="dialog" и aria-modal="true", а кнопкам — aria-label с понятным описанием действия. При открытии модального окна переводите фокус на крестик, при закрытии возвращайте его на исходную миниатюру. Это поможет людям с ограниченными возможностями пользоваться галереей без посторонней помощи и улучшит поведение сайта в поисковых системах.

Для ускорения загрузки используйте атрибут loading="lazy" на миниатюрах и предзагрузку полноразмерных версий только при открытии лайтбокса. Если картинок много, динамически подставляйте srcset, чтобы мобильные устройства получали облегчённые варианты, а десктопы — полноценные. Такой подход сочетает удобство пользователя и экономное потребление трафика, что особенно важно для аудитории, которая заходит на сайт со смартфона в дороге.

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