Этот компонент не поддерживается в объявлениях AMPHTML, видеорекламе и графических объявлениях.
Компонент "Круговая галерея" используется для создания галереи изображений, которые можно перелистывать. Свойства компонента позволяют создавать различные варианты трехмерного просмотра и пролистывания галереи. Круговую галерею также можно использовать в динамических объявлениях.
Как выбрать галерею
В Google Web Designer есть четыре компонента с галереями:
- Панорамная галерея позволяет показать объект со всех сторон. Объект можно поворачивать, перелистывая изображения. Этот компонент не работает с группами и элементами навигации.
- Перелистываемая галерея позволяет создать простую вертикальную или горизонтальную галерею изображений или их групп.
- Круговая галерея похожа на компонент "Перелистываемая галерея", но изображения сменяются с трехмерным эффектом, как на вращающемся экране.
- Галерея переходов позволяет использовать ряд анимационных эффектов при смене изображений.
Как использовать в проекте компонент "Круговая галерея"
-
Откройте панель Компоненты, а затем папку Галереи.
-
Перетащите компонент Круговая галерея в рабочую область.
-
Введите название компонента в соответствующем разделе панели Свойства.
-
Добавьте в галерею набор изображений или групп. С помощью групп можно добавлять в галерею объекты, которые не относятся к изображениям, или объединять в одном кадре несколько разных объектов.
- Чтобы добавить в галерею изображения, выполните одно из следующих действий:
- На панели Свойства в разделе компонента "Круговая галерея" нажмите кнопку Выберите изображения для галереи в поле Изображения. Затем воспользуйтесь функцией Выбрать изображения или перетащите изображения прямо в диалоговое окно.
- В разделе свойств компонента на соответствующей панели в поле Изображения укажите URL изображений через запятую.
- Чтобы добавить в галерею группы, сделайте следующее:
- На панели Свойства в разделе компонента "Круговая галерея" укажите названия групп через запятую в поле Группы.
- Чтобы добавить в галерею изображения, выполните одно из следующих действий:
-
При необходимости настройте описанные ниже дополнительные свойства компонента.
Как удалить изображения из галереи или изменить их порядок
- На панели Свойства в разделе компонента "Круговая галерея" нажмите кнопку Выберите изображения для галереи .
- Чтобы изменить порядок изображений, перетащите их. Чтобы удалить изображение из галереи, наведите на него указатель и нажмите кнопку Удалить .
- Нажмите ОК.
Свойства
Свойство | Описание |
---|---|
Название | Название компонента "Круговая галерея". |
Изображения | Позволяет выбрать изображения для галереи. Можно связать с динамическими данными. |
Группы | Разделенный запятыми список групп, используемых в галерее. Можно связать с динамическими данными. |
Переход | Время перехода между изображениями в миллисекундах. |
Начальный кадр | Номер изображения, которое должно показываться первым. |
Автовоспроизведение | Если флажок установлен, изображения галереи перелистываются автоматически. |
Навигация | Если флажок установлен, в галерее отображаются кнопки для перехода между изображениями. |
Уменьшенные изображения | Если установлены флажки "Уменьшенные изображения" и "Навигация", на панели навигации показываются уменьшенные изображения, а не значки. |
Выделить цветом | Определяет цвет рамки вокруг изображения в панели навигации. |
Масштаб | Позволяет адаптировать размеры изображений. Возможные варианты:
|
Дополнительные свойства
Чтобы задать другие параметры, нажмите на значок в строке Дополнительные свойства на панели свойств компонента.
Ширина рамки | Ширина кадра изображения в галерее (в пикселях). |
Высота рамки | Высота кадра изображения в галерее (в пикселях). |
Вращение по ближайшим соседям | Величина поворота соседних кадров. |
Разделение по ближайшим соседям | Расстояние между соседними кадрами. |
Вертикальное смещение по ближайшим соседям | Насколько высоко располагается соседний кадр. |
Размер по ближайшим соседям | Сравнительный масштаб соседнего изображения. |
URL перехода | Разделенный запятыми список URL, соответствующих кадрам галереи. Можно связать с динамическими данными. |
Показать отражение (WebKit) | Если этот флажок установлен, показывается отражение изображения. Эта функция поддерживается только в браузерах на основе WebKit. |
Приостанавливать при выходе из кадра | Если этот флажок установлен, при смене кадра будет приостановлено аудио или видео, воспроизводимое в текущем кадре (устраняет нежелательное воспроизведение содержимого в фоновом режиме). |
Возобновлять при входе в кадр | Если этот флажок установлен, при смене кадра начнется воспроизведение приостановленного аудио или видео в следующем кадре (устраняет нежелательное воспроизведение содержимого в фоновом режиме). |
События и действия
События, отправляемые компонентом "Круговая галерея"Перечисленные ниже события компонента "Круговая галерея" могут инициировать другие действия.
Событие | Описание |
---|---|
Первое взаимодействие | Отправляется, когда пользователь впервые использует галерею. |
Все кадры просмотрены | Отправляется, когда каждый кадр в галерее был показан не менее одного раза. |
Изображения загружены | Отправляется после загрузки всех кадров галереи. |
Завершение автовоспроизведения | Отправляется после завершения автовоспроизведения по любой причине. |
Кадр показан | Отправляется, когда каждый новый кадр полностью показан. |
Кадр активирован | Отправляется после начала смены кадра. |
Завершение автовоспроизведения кадра | Отправляется после активации кадра для автовоспроизведения. |
Касание кадра | Отправляется после нажатия на кадр. |
Левый край | Отправляется, когда после пролистывания достигнут левый край галереи. |
Правый край | Отправляется, когда после пролистывания достигнут правый край галереи. |
Начало отслеживания | Отправляется, когда начинается перетаскивание касанием либо мышью. |
Отслеживание | Регистрация координат компонента (X и Y) во время перетаскивания мышью или касанием. |
Окончание отслеживания | Отправляется, когда оканчивается перетаскивание касанием или мышью. |
Чтобы выбрать одно из этих событий в диалоговом окне Событие, установите компонент "Круговая галерея" как цель.
Другие события могут вызывать следующие действия в компоненте "Круговая галерея":
Действие | Параметры настройки |
---|---|
Перейти к кадру |
|
Вперед | Анимация: none или slide |
Назад | Анимация: none или slide |
Однократный поворот |
|
Прекратить вращение | Нет |
Выбрав одно из этих действий в диалоговом окне Событие, установите компонент "Круговая галерея" как получатель.
Подробнее о том, как настраивать события…
Предпросмотр
В рабочей области отображается первый кадр круговой галереи, чтобы вам было понятно, где появится компонент. Чтобы увидеть компонент в действии, посмотрите документ в предпочитаемом браузере, нажав кнопку Предпросмотр в правом верхнем углу.