Модуль «Галерея изображений: автосбор фото в галерею» — это мощный инструмент вовлечения пользователя и улучшения юзабилити вашего сайта! Представляем готовый модуль галереи для сайтов на 1С-Битрикс, который автоматически превращает обычные изображения на странице сайта в современную, адаптивную и многофункциональную галерею изображений, создавая фотогалерею автоматически, без участия редактора.
Контакты
Телефон
Email
Адрес
300002, Тульская область, г. Тула, ул. Литейная, д. 4, оф. 188
Модуль
«Галерея изображений: автоматический сбор фотографий в галерею» — модуль для сайта на Битрикс
Если вам нужна удобная галерея изображений на сайт с возможностью просмотра с пролистыванием фотографий, зума, скачивания и шаринга — наш модуль для сайта решит эту задачу!
Живой пример работы модуля — кликните на изображение.
Как работает автоматический модуль создания галереи изображений на сайте?
Стандартный Битрикс при публикации страниц (статья, лонгрид, новость, описание услуг и т.д.) позволяет выводит картинки «портянкой» — одна за другой, что убивает дизайн и удобство. Наш модуль «Галерея изображений для Битрикс» решает эту проблему:
Автоматически собирает все изображения и фото из контента в единую галерею на странице.
Группирует идущие подряд изображения в компактный галерейный блок со стрелками.
При клике на любую картинку открывается полноэкранный просмотрщик с листалкой, зумом и подписями.
Работает на десктопах и мобильных устройствах «из коробки».
Как работает скрипт галереи для сайта?
Модуль интегрируется в ваш шаблон Битрикс и сканирует заданный контейнер с контентом. Он ищет теги изображений (figure и img), после чего:
01
Формирует единую галерею публикации
Все изображения страницы можно листать как одну галерею стрелками, свайпом или кликом.
02
Создает галерейные блоки
Если между картинками нет текста (допускаются br, div, p), они объединяются в визуальный блок галереи с навигацией.
Функции, которые получает пользователь при клике на изображение
При клике на изображение в публикации поверх контента открывается модальное окно фотогалереи с полным функционалом:
Просмотр всех изображений
Листайте влево/вправо по карусели все изображения этой страницы
Зум
Клик мышью или два пальца на мобильном — увеличение изображения до 2х раз
Скачивание
Кнопка «Скачать», если разрешено в настройках
Поделиться
ВК, ОК, MAX, Telegram, WhatsApp и другие соцсети (можно добавлять)
Слайд-шоу
Автоматическая смена изображений
Fullscreen
Просмотр фото на весь экран
Подписи
Отображаются в галерее под изображением
Группировка изображений в галерейный блок на странице
Вместо длинной «портянки» из 5–10 картинок подряд модуль создает галерейный блок:
- Изображения отображаются в виде компактной карусели.
- Доступны стрелки для листания и свайп на мобильных.
- При клике на миниатюру — открывается полноэкранная галерея.
- Между картинками может быть любой HTML (br, div, p), но отсутствие текста — условие для группировки.
Это делает страницу чище. Скрипт галереи изображений работает при загрузке странице браузером пользователя и не нагружает ни сервер сайта, ни базу данных.
Настройки модуля в CMS-панели сайта 1С-Битрикс «Управление сайтом»
Модуль настраивается редактором/администратором через интерфейс Битрикс.
Основные параметры
| Параметр | Описание | По умолчанию |
|---|---|---|
| Контейнер контента | Укажите контейнер контента, где искать изображения |
Например, .news-detail
|
| Кнопка «Поделиться» |
Вкл/выкл и кнопку «Поделиться» и выбор соцсетей
(ВК, ОК, Telegram, WhatsApp и др.)
Добавление своих иконок и ссылок для шаринга. |
Вкл |
| Кнопка «Скачать» | Разрешить скачивание оригиналов | Вкл |
| Группировка рядом идущих изображений | Объединять в карусель на странице | Вкл |
| Минимальный размер изображения | По меньшей стороне (px). Меньше — исключаются из галереи | 300 |
| Исключаемые теги | Внутри этих тегов изображения не собираются |
<table>, <div id="adfox,
<div id="yandex_rtb
|
Мобильная версия — сделано с любовью к пользователю
Мы проанализировали поведение на телефонах (как в Telegram и ВК) и реализовали идеальную галерею изображения на сайт для мобильных устройств:
Убраны все отступы по ширине — картинка занимает весь экран.
Стрелки скрываются через 2 секунды после открытия — ничего не мешает.
Один клик — открытие на весь экран.
Два клика — первый зум (×2), второй — масштаб по высоте.
Один клик на открытом изображении — скрывает все надписи (чистый fullscreen).
На узких экранах (< 300px ) — в кнопке «Поделиться» остается только иконка, текст убирается.
Сравнение с типовым решением
| Характеристика | Наш модуль | Типовые решения |
|---|---|---|
| Автосбор изображений из контента | Да | Ручная настройка |
| Группировка подряд идущих картинок | Да | Нет |
| Подписи figcaption в галерее | Да | Только alt |
| Зум, скачивание, шаринг | Да | Частично |
| Адаптив под мобильные (как в Telegram) | Да | Типовой lightbox |
| Работа с любым шаблоном и лицензией 1C-Битрикс «Управление сайтом» | Да | Зависит от шаблона |
Кому подходит этот php-скрипт для сайта галерея?
Новостным порталам — фоторепортажи, события.
Блогам и лендингам — портфолио, обзоры.
Интернет-магазинам — карточки товаров с множеством фото.
Образовательным сайтам — галереи мероприятий.
Отзывы
«Всем!ру» — информационно-аналитический портал
-
Максим Сергеевич О.
Спасибо команде разработчиков платформы портала! Была проделана большая работа по созданию информационного сайта СМИ и блог-платформы, которой сегодня пользуются тысячи свободных авторов и читают сотни тысяч человек каждый месяц. Уверен, что готовая платформа портала будет и дальше развиваться, расширятся её функционал.
Главный редактор портала «Всем!ру»
True Henna магазин натуральной хны
-
Дунаева Кристина
Спасибо проекту «Готовый» за красочный интернет-магазин. Мы получили свой индивидуальный дизайн и логотип, сайт с удобной навигацией, адаптивной версткой и слайдером. Теперь клиентки могут с удобством заказывать нашу натуральную косметику и через компьютер, и через смартфон. У нас небольшое количество товаров, поэтому маркетологи проекта «Готовый» поработали над каждой товарной карточкой и сделали ее привлекательной и продающей.