Фотогалерея для сайта (с увеличением)
Вставьте адреса изображений (по одному на строку, с необязательной подписью после вертикальной черты). Выберите столбцы и скругление углов и скопируйте готовый блок.
Как пользоватьсяГалерея с увеличенным фото
Доступно на: 
Фотогалерея для сайта (с увеличением): для чего нужен
Хорошая фотогалерея показывает работы, помещение и товары, не утяжеляя страницу. Этот генератор создаёт адаптивную сетку на CSS grid с выбором числа столбцов на компьютере и телефоне, формы миниатюр и скругления углов.
По касанию фото открывается увеличенным с помощью встроенного элемента dialog в HTML, со стрелками на экране и на клавиатуре, подписью и закрытием по Esc или касанию вне фото. Миниатюры загружаются отложенно, а подпись становится альтернативным текстом, что полезно для доступности и SEO изображений.
Как пользоваться
- Вставьте адреса фото с подписями.
- Выберите столбцы, формат и скругление.
- Скопируйте код и вставьте на сайт.
Когда использовать
- Портфолио фотографа, барбера или архитектора.
- Фото помещения ресторана или магазина.
- Работы «до и после».
Частые вопросы
Работает ли без библиотек?
Да. Сетка построена на CSS grid, а увеличение использует встроенный в браузер элемент dialog, который сам заботится о тёмном фоне, фокусе и закрытии клавишей Esc. В скрипте всего несколько строк, только для переключения фото.
Тяжело ли загружаются фото?
Миниатюры используют loading=lazy и decoding=async: они загружаются, только когда приближаются к экрану. Чтобы было ещё легче, создайте уменьшенные версии для миниатюр (это делает инструмент изображений для сайта) и используйте большую только при увеличении.
Нужна ли подпись?
Подпись становится альтернативным текстом (alt) фото: его читают программы экранного доступа, и он помогает SEO изображений. Описывайте то, что на фото, например «Стрижка с градиентом и борода», а не «фото 1».
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.