Галерея GL03 в Tilda: сетка фотографий с плавным раскрытием на весь экран

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

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

Добавьте GL03 и заполните его настоящими изображениями и подписями. В «Где применять» укажите нужный блок, чтобы фотографии из других частей страницы не попали в галерею.

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

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

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

Если галерея должна появиться внутри шейпа Zero Block, укажите его класс без точки. Проверьте размеры принимающей фигуры.

При ограниченной области применения в неё должны входить и источник GL03, и Zero Block с этим шейпом. Выбор только одного из них может оставить вторую часть за пределами работы мода. Сначала добейтесь появления сетки в нужном месте, затем подбирайте отступы и скругления. Не пытайтесь исправить неверную область увеличением высоты пустого контейнера.

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

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

Подберите длительность открытия, закрытия и смены фото. Настройте стрелки, счётчик и кнопку закрытия. Затем пройдите весь сценарий: открыть плитку, сменить снимок и вернуться в сетку.

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

Разместите код в T123 после нужных блоков и опубликуйте страницу.

• В галерее только выбранные фотографии.
• Колонки и промежутки подходят телефону.
• Режим без обрезки сохраняет весь кадр.
• Подписи читаются, а кнопка закрытия доступна.
• После закрытия можно продолжить просмотр страницы.

Если нужна сетка с плитками разной высоты и зумом для деталей, сравните её с Pinterest-галереей. Здесь основной приём — одинаковые выбранные пропорции плиток и плавное раскрытие снимка.

Читайте также: Галерея как в Pinterest на Tilda: сетка и увеличение фото · Слайдер-стопка в Tilda: фотографии из GL03 одна за другой.