Из этой статьи вы узнаете, как добавлять, настраивать и проверять виджеты слайд-шоу «Полноэкранный режим» и «Миниатюры» в Adobe Muse.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Виджеты «Слайд-шоу» в Adobe Muse — это интерактивные виджеты, которые работают только с изображениями. Аналогично виджету «Панель с вкладками», при нажатии контейнера миниатюр, отображается соответствующее главное изображение в другом, более крупном, контейнере на странице.

Adobe Muse поддерживает следующие типы виджетов «Слайд-шоу»:

  • Основной: этот виджет состоит из большого контейнера, в который можно добавить изображения, а под контейнером добавить подпись. В области подписи также доступны кнопки перехода вперед и назад, а также поле для номера текущего слайда.
  • Пустая: этот виджет похож на «Основной», но с пустыми контейнерами.
  • Полноэкранный режим: если перетащить этот виджет и разместить его на холсте «Дизайн», он отобразится во весь экран. По умолчанию кнопки перехода вперед и назад, а также поле для номера текущего слайда представлены в маленьком контейнере в левом верхнем углу страницы.
  • Лайтбокс: этот виджет затемняет все области страницы, кроме слайд-шоу или элемента галереи, которые в настоящий момент активны на странице. «Лайтбокс» — один из самых часто используемых виджетов «Слайд-шоу», поскольку он позволяет мгновенно сфокусироваться на активном элементе галереи.
  • Миниатюры: этот виджет похож на виджет «Композиция», однако он содержит миниатюры, отображающиеся слева от области галереи. При нажатии миниатюры отображается соответствующее изображение в области галереи.

В данной статье мы создадим фотогалерею, в которой над одним крупным изображением будут отображаться несколько миниатюр. Управлять отображением и функционированием фотогалереи можно с помощью панели «Параметры». А настройки на панели элементов управления помогут оформить внешней вид слайд-шоу.

Добавление возможности демонстрации в режиме «Слайд-шоу» во весь экран: просмотрите инструкции по оформлению веб-сайта в Adobe Muse с демонстрацией в режиме «Слайд-шоу» во весь экран. Полноэкранная демонстрация в режиме «Слайд-шоу» по всей ширине настраивается с помощью библиотеки виджетов.
Danielle Beaumont

Добавление виджетов слайд-шоу «Миниатюры» на страницу

Слайд-шоу можно добавлять непосредственно на страницы, однако в этом примере мы рассмотрим процесс вставки виджета слайд-шоу «Миниатюры» в область содержимого виджета «Панель с вкладками». Чтобы добавить непосредственно слайд-шоу, выполните следующие действия:

  1. Откройте Adobe Muse. На экране приветствия выполните одно из следующих действий

    • Нажмите «Создать новый», чтобы добавить виджет «Слайд-шоу» на новый создаваемый сайт.
    • Нажмите «Открыть», затем откройте существующий файл MUSE в месте, где требуется добавить виджет. Дважды нажмите и откройте страницу, на которую требуется добавить виджет «Слайд-шоу».
  2. Откройте библиотеку виджетов, выбрав «Окно» > «Библиотека виджетов»  и разверните раздел «Слайд-шоу». Выберите нужный виджет в этом списке. Например, из списка выберите виджет слайд-шоу «Миниатюры» и перетащите его на страницу «Дизайн».

    Виджет слайд-шоу «Миниатюры» в библиотеке виджетов Adobe Muse
    Перетаскивание виджета слайд-шоу «Миниатюры» на страницу.

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

    Примечание.

    Для удаления содержимого по умолчанию, которое подставилось в виджете, нажмите виджет правой кнопкой мыши и выберите «Удалить содержимое виджета».

  3. Для удаления миниатюр выделите содержимое заполнителя (фрейм изображения и текстовый фрейм в области содержимого) и удалите его.

Настройка виджета слайд-шоу «Миниатюры» на панели параметров

Можно настроить параметры виджета «Слайд-шоу», используя панель параметров для конкретного виджета. Далее представлена информация о том, как включить автоматическое воспроизведение, эффекты перехода, перелистывание (для устройств с сенсорным экраном) и др.

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

    Отключите параметры «Подписи» и «Счетчик», чтобы остались только триггер-кнопки миниатюр и большой целевой контейнер. Просмотрите параметры и измените их следующим образом:

    • Новое главное изображение: заполнить фрейм с сохранением пропорций
    • Новая миниатюра: заполнить фрейм с сохранением пропорций
    • Переход: выцветание
    • Скорость перехода: 0,5 секунды
    • Автоматическое воспроизведение: не включено
    • Возобновить через: включено
    • Воспроизвести однократно: не включено
    • Перемешать: не включено
    • Разрешить перелистывание: включено
    • Лайтбокс: включено
    • Во весь экран: включено
    • Автолайтбокс: не включено
    • Миниатюры произвольной формы: включено
    • Первый: не включено
    • Назад: включено
    • Далее: включено
    • Последний: не включено
    • Подписи: включено
    • Счетчик: включено
    • Кнопка «Закрыть»: не включено
    • Миниатюры: включено
    • Показать элементы лайтбокса при редактировании: включено
    • Редактировать вместе: включено
    Панель параметров слайд-шоу
    Изменение настроек виджета слайд-шоу «Миниатюры» на панели «Параметры».

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

    Добавить изображения: нажмите на значок папки для поиска и выбора изображений для отображения.

    Новое главное изображение: определяет способ отображения большой фотографии в целевом контейнере.

    • Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
    • Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.

    Новая миниатюра: определяет способ отображения миниатюры фотографии в контейнере триггера.

    • Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
    • Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.

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

    • Выцветание: уровень прозрачности нового контейнера увеличивается, а текущего контейнера уменьшается.
    • По горизонтали: новый контейнер появляется сбоку, надвигаясь на текущий контейнер.
    • По вертикали: новый контейнер появляется сверху или снизу, надвигаясь на текущий контейнер.

    Скорость перехода: продолжительность воспроизведения анимации в секундах.

    Автоматическое воспроизведение: когда этот параметр включен, слайд-шоу воспроизводится автоматически, не требуя действий посетителя (т. е. нажатия каждого триггера для последовательного просмотра соответствующего целевого объекта). Задайте время отображения каждого изображения в секундах до перехода к следующему изображению.

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

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

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

    Раздел «Составные элементы»:

    • Первый: когда этот параметр включен, отображается кнопка «Первый».
    • Назад: когда этот параметр включен, отображается кнопка «Назад».
    • Далее: когда этот параметр включен, отображается кнопка «Далее».
    • Последний: когда этот параметр включен, отображается кнопка «Последний».
    • Подписи: когда этот параметр включен, отображаются подписи фотогалереи.
    • Счетчик: когда этот параметр включен, отображается счетчик фотогалереи.
    • Кнопка «Закрыть»: когда этот параметр включен, отображается кнопка «Закрыть».

    Миниатюры: когда этот параметр включен, отображаются триггер-кнопки миниатюр.

    Раздел «Редактирование»:

    • Показать элементы лайтбокса при редактировании: при включенном параметре «Лайтбокс» области целевых объектов отображаются по умолчанию, когда на странице выбран соответствующий триггер. Вы можете включить этот параметр при создании макета, чтобы видеть все целевые объекты. Этот параметр не влияет на отображение слайд-шоу при предварительном просмотре страницы или ее просмотре в браузере. Если параметр «Лайтбокс» не включен, этот параметр недоступен. 

    Обратите внимание, что параметр «Показать элементы лайтбокса при редактировании» включен, только если выбран виджет слайд-шоу «Лайтбокс».

    • Редактировать вместе: этот параметр включен по умолчанию для упрощения и сокращения времени редактирования виджетов. Если каждый триггер не требуется оформлять по-разному, то не отключайте этот параметр, чтобы все изменения, внесенные в один элемент, автоматически применялись к другим элементам.

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

    Примечание.

    Параметры «Лайтбокс» и «Полноэкранный режим» отключены для слайд-шоу «Полноэкранный режим».

    Параметр «Полноэкранный режим» можно включить только для виджета слайд-шоу «Полноэкранный режим».

Выравнивание и изменение размера элементов виджета слайд-шоу «Миниатюры»

  1. Нажмите и выберите виджет «Слайд-шоу». С помощью инструмента «Выделение» перетащите манипуляторы виджета слайд-шоу «Миниатюры», чтобы изменить его размер до 790 пикселей в ширину и 490 пикселей в высоту. Узнать текущий размер можно на панели «Перспектива» или в полях «Перспектива» на панели элементов управления.

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

    Контейнер с пятью миниатюрами
    Выбор контейнера триггера с миниатюрами и перемещение его в область над целевым контейнером.

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

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

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

  4. Выберите необходимые файлы изображений. Нажмите «Открыть» для закрытия диалогового окна «Импорт».

    Диалоговое окно «Импорт»
    Выбор пяти фотографий в подпапке «gallery»

    При выборе нескольких файлов изображений загружается виджет слайд-шоу «Миниатюры». Такой подход позволяет выбирать несколько файлов изображений, создавая кнопку контейнера миниатюры, соответствующую каждому из новых файлов изображений в контейнере главного изображения.

    Пять новых изображений добавятся в кнопки миниатюр.

  5. Дважды нажмите и выберите изображение миниатюры, отображавшееся по умолчанию при первом добавлении слайд-шоу. Удаляйте эти миниатюры, поочередно выбирая их и нажимая клавишу Delete (Mac) или клавишу возврата со стиранием Backspace (Windows) до тех пор, пока не останутся только новые миниатюры.

    Миниатюры и изображение слайд-шоу
    Выбор черно-белых миниатюр по умолчанию и их последовательное удаление нажатием клавиш Backspace или Delete

    Соблюдайте осторожность, чтобы не удалить весь набор миниатюр. Если это произошло, отмените последнее действие, выбрав команду «Редактировать» > «Отменить», а затем нажимайте на каждую миниатюру по отдельности (в индикаторе выбора будет отображаться слово «Миниатюра»), прежде чем нажать клавишу Backspace или Delete.

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

    Миниатюры и изображение слайд-шоу
    Изменение размера контейнера миниатюр по отношению к центру главного изображения

Работа с адаптивными виджетами «Слайд-шоу»

По умолчанию слайд-шоу адаптивные или гибкие. Чтобы использовать адаптивный виджет «Слайд-шоу» на веб-сайте Adobe Muse, выполните одно из следующих действий.

  • При создании нового сайта откройте его, затем перетащите и разместите виджет «Слайд-шоу» с панели «Библиотека виджетов». Обратите внимание, что по умолчанию виджет является адаптивным.
  • При наличии существующего файла MUSE откройте его в последней версии приложения Adobe Muse. Выделите виджет. Чтобы сделать виджет адаптивным, выделите его элементы, затем выберите «Адаптивная ширина и высота» или «Адаптивная ширина» в раскрывающемся списке «Изменить размер» в контекстном меню.
Выберите параметр «Изменить размер», чтобы сделать виджет «Слайд-шоу» адаптивным
Выберите параметр «Изменить размер», чтобы сделать виджет «Слайд-шоу» адаптивным

Если вы добавляете виджет «Слайд-шоу» на адаптивный сайт, проверьте расположение и размер виджета по всем точкам остановки. Можно изменить содержимое и размер отдельных элементов виджета «Слайд-шоу». Можно также включить адаптивные параметры для отдельных элементов (например, кнопки «Назад», кнопки «Далее», подписей) на различных точках остановки.

Проверка отображения виджета слайд-шоу «Миниатюры»

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

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

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

    Проверка миниатюры и слайд-шоу
    Выравнивание положения галереи по центру контейнера области содержимого виджета «Панель с вкладками»

  3. Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу с информацией о компании (страница «about») в браузере.

    Измените размер окна браузера и проверьте, как виджет «Слайд-шоу» отображается на экранах разных размеров. Виджеты «Слайд-шоу» по умолчанию адаптивны. Это значит, что они могут менять свой размер, адаптируясь под размеры экрана. 

    Также для предварительного просмотра виджетов можно использовать указатель в режиме «Дизайн». Для изменения или перемещения виджета добавьте точку остановки и выполните выравнивание виджета. 

  4. Проверьте функционирование виджета «Панели с вкладками». Нажимая вкладки, убедитесь, что в контейнерах области содержимого отображается соответствующее содержимое. Затем проверьте слайд-шоу на вкладке «Gallery». Убедитесь, что при нажатии кнопок миниатюр отображаются соответствующие главные изображения.

Создание презентации в виде слайд-шоу с помощью виджета «Слайд-шоу»

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

В следующих подразделах мы рассмотрим процесс добавления слайд-шоу с автоматическим воспроизведением на главную страницу сайта.

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

Настройка автоматического воспроизведения для виджета «Слайд-шоу»

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

  1. В библиотеке слайд-шоу нажмите «Слайд-шоу».

  2. Выберите виджет «Основной» и перетащите его на страницу.

  3. По умолчанию виджет Базовое слайд-шоу содержит один темно-серый прямоугольник (заполнитель изображения), заполнитель подписи, номер изображения (1 – 1) и две кнопки со стрелками (для перехода далее и назад), которые посетители могут нажимать для перехода по изображениям.

  4. Нажмите синюю стрелку, чтобы открыть меню Параметры. Установите следующие параметры:

    • Переход: выцветание
    • Автоматическое воспроизведение: медленно
    • Новое главное изображение: заполнить фрейм с сохранением пропорций
    • Новая миниатюра: заполнить фрейм с сохранением пропорций
    • Лайтбокс: отключен
    • Составные элементы: снимите флажки всех параметров, чтобы скрыть подписи, счетчик, кнопки «Далее» и «Назад».

    Примечание.

    Данное слайд-шоу будет воспроизводиться автоматически при загрузке страницы без взаимодействия с пользователем. Чтобы создать слайд-шоу, которым посетитель сайта сможет управлять при помощи мыши, в разделе Составные элементы меню Параметры установите для параметра Автоматическое воспроизведение значение Нет и оставьте флажки для кнопок Далее и Назад установленными.

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

  6. Дважды нажмите и выберите Фрейм изображения (прямоугольник темно-серого цвета), затем перетащите боковые манипуляторы для раскрытия слайд-шоу во всю ширину страницы.

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

  7. С помощью верхней и нижней стрелок увеличьте фрейм изображения, чтобы он полностью заполнял главную страницу. Растяните фрейм изображения вниз, пока его нижняя граница не остановится прямо над зигзагообразным изображением мозаики, которая отображается в верхней части нижнего колонтитула. На данном этапе темно-серый заполнитель будет закрывать «подтек» коричневого цвета в правой части строки навигации.

  8. Нажмите синюю стрелку еще раз, чтобы открыть меню Параметры. Нажмите значок папки вверху рядом с текстом «Добавить изображения».

  9. В диалоговом окне «Импорт» перейдите к папке ресурсов и откройте ресурсы. Нажмите Выбрать, чтобы добавить изображения в слайд-шоу.

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

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

  1. В представлении План дважды нажмите миниатюру Шаблон-А, чтобы открыть ее в представлении Дизайн.

  2. С помощью инструмента Выделение выделите «подтек» в правой верхней части графического элемента навигации.

  3. Нажмите «подтек» правой кнопкой мыши и в открывшемся контекстном меню выберите Упорядочить > На передний план.

  4. Нажмите значок «X» вкладки «Шаблон-А», чтобы закрыть ее. Откройте страницу, на которую был добавлен виджет «Основной». Нажмите Предварительный просмотр и проверьте, что «подтек» теперь отображается поверх слайд-шоу. После проверки слайд-шоу вернитесь в режим просмотра «Дизайн».

    Примечание.

    Поскольку строка навигации создана на странице «Шаблон-А», то при внесении в нее изменений (а также в другие общие элементы) страница «Шаблон-А» будет открываться в представлении Дизайн для редактирования. Несмотря на то, что элементы страницы-шаблона видны на редактируемых страницах, содержимое верхнего и нижнего колонтитулов недоступно для редактирования на других страницах сайта.

Добавление виджетов слайд-шоу «Полноэкранный режим»

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

Чтобы добавить виджет слайд-шоу «Полноэкранный режим» на сайт, выполните следующие действия.

  1. Запустите Adobe Muse. Дважды нажмите страницу, чтобы открыть ее в режиме «Дизайн».

  2. Выберите «Окно» > «Библиотека виджетов», чтобы открыть библиотеку виджетов, или нажмите вкладку «Библиотека виджетов» на панели, чтобы сделать ее активной.

  3. Разверните раздел «Слайд-шоу» в списке виджетов. В разделе «Слайд-шоу» выберите виджет с именем «Полноэкранный режим».

    Библиотека виджетов
    В библиотеке виджетов найдите и выберите виджет слайд-шоу «Полноэкранный режим».

Настройка виджетов слайд-шоу «Полноэкранный режим».

Работа виджета слайд-шоу «Полноэкранный режим» отличается от других виджетов в Adobe Muse. Посмотрите, как оно работает.

  1. Перетащите виджет слайд-шоу «Полноэкранный режим» из библиотеки виджетов на страницу.

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

    Виджет слайд-шоу во весь экран
    Виджет слайд-шоу «Полноэкранный режим» покрывает всю видимую область сайта, заполняя окно браузера.

    По умолчанию при добавлении виджета слайд-шоу «Полноэкранный режим» в его правом верхнем углу отображаются кнопки перехода вперед и назад, а также поле счетчика.

  2. Нажмите синюю стрелку для просмотра настроек на панели «Параметры».

    Панель параметров слайд-шоу
    На панели «Параметры» отображаются настройки по умолчанию, примененные к виджету слайд-шоу «Полноэкранный режим».

    Параметр «Заполнить фрейм с сохранением пропорций» автоматически применяется к изображениям «Новое главное изображение» (большие изображения) и «Новая миниатюра», способствуя правильному отображению изображений в полноэкранном режиме.

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

    Если установлен параметр «Автоматическое воспроизведение», слайд-шоу запускается сразу после загрузки страницы и изображения чередуются с заданной скоростью. По умолчанию при включенном параметре «Автоматическое воспроизведение» каждое изображение отображается 3,5 секунды.

    При настройке виджета слайд-шоу «Полноэкранный режим» рекомендуется активировать кнопки навигации вперед и назад, чтобы миниатюры скрывались по умолчанию. Однако если необходимо, чтобы они отображались поверх основного изображения слайд-шоу, можно включить параметр «Миниатюры».

    Если миниатюры скрыты, не забудьте активировать кнопки перехода вперед и назад. Счетчик не является обязательным, он позволяет посетителям видеть, какое по счету изображение из набора отображается в данный момент.

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

    Можно изменить параметры «Закрепить» и «Изменить размер» на различных точках остановки при добавлении виджета на адаптивный сайт.

Добавление изображений в виджеты слайд-шоу «Полноэкранный режим»

Затем в виджет «Полноэкранное слайд-шоу» необходимо добавить изображения. Выполните следующие действия.

  1. Выберите «Файл» > «Поместить».

  2. В открывшемся окне импорта выберите несколько смежных файлов изображений, удерживая нажатой клавишу Shift. Или нажмите и удерживайте клавишу Command (Mac) или Ctrl (Windows), чтобы выбрать в папке несколько несмежных файлов изображений.

  3. Нажмите кнопку «Открыть», чтобы загрузить выбранные файлы в Place gun.

    Примечание.

    Даже если выбранные изображения имеют разные размеры и соотношения сторон, благодаря параметру «Заполнить фрейм с сохранением пропорций» их масштаб будет изменен в соответствии с размерами страницы.

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

  5. Выберите меню «Файл» > «Предварительный просмотр страницы в браузере». Измените размер окна браузера и посмотрите, как изменяются масштаб и размеры содержимого слайд-шоу в соответствии с размером окна браузера. Нажимая кнопки «Далее» и «Назад», пролистайте серию изображений, или просто наблюдайте за сменой изображений, если включен параметр «Автоматическое воспроизведение».

  6. Закройте окно браузера и вернитесь в приложение Adobe Muse. 

Настройка миниатюр произвольной формы в виджетах «Слайд-шоу»

Параметр «Миниатюры произвольной формы» позволяет управлять отображением миниатюр в слайд-шоу. Миниатюры можно располагать не только в ряд или несколько рядов, но и помещать каждую миниатюру в любое местоположение.

  1. В представлении «Дизайн» откройте библиотеку виджетов и разверните раздел «Слайд-шоу». Перетащите любое из виджетов слайд-шоу на страницу.

  2. Когда выделена вся страница, дважды нажмите и выделите изображение миниатюры. Индикатор выбора в левом верхнем углу панели управления показывает, какой элемент выбран в данный момент.

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

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

Настройка параметров дисплея для произвольных миниатюр

Если необходимо, чтобы миниатюры отображались в случайных местах или не были выровнены в ряд, можно удалить внешний контейнер и расположить изображение каждой миниатюры на странице в нужном месте. Выполните следующие действия.

  1. Когда выбран виджет «Слайд-шоу», нажмите синюю стрелку, чтобы открыть меню «Параметры».

  2. Установите флажок рядом с параметром «Миниатюры произвольной формы». Ограничительная рамка, отображающаяся вокруг контейнера миниатюр в представлении «Дизайн», сразу исчезнет, а в индикаторе выбора отобразится слово «Слайд-шоу».

    Панель параметров контейнера миниатюр
    При включении параметра «Миниатюры произвольной формы» контейнер, окружающий миниатюры, удаляется.

  3. Нажмите в любом месте страницы за пределами меню «Параметры», чтобы закрыть его.

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

  4. С помощью инструмента «Выделение» выберите одну миниатюру. Когда она выбрана, в индикаторе выбора отображается слово «Миниатюра». Переместите выбранную миниатюру в необходимое место. Повторите этот шаг, чтобы переместить все миниатюры. Если необходимо, чтобы при прокручивании страницы в браузере или изменении размера окна браузера миниатюры оставались на своем месте, каждую миниатюру можно закрепить.

    Примечание.

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

    На адаптивном сайте также можно выполнять выравнивание, изменять размер и настраивать закрепление миниатюр.

  5. Выберите «Файл» > «Предварительный просмотр страницы в браузере». Миниатюры слайд-шоу отобразятся на странице. Щелкайте миниатюры для просмотра соответствующих изображений в слайд-шоу.

  6. Закройте браузер и вернитесь в приложение Adobe Muse.

Настройка отображения лайтбокса для виджетов «Слайд-шоу»

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

Все виджеты раздела «Слайд-шоу» в приложении Adobe Muse имеют параметр «Лайтбокс». Кроме того, один виджет в разделе «Слайд-шоу» предварительно настроено на использование лайтбокса. В виджете слайд-шоу «Лайтбокс» параметр «Лайтбокс» включен по умолчанию.

Чтобы создать слайд-шоу, в котором изображения отображаются в лайтбоксе, выполните следующие действия.

  1. В представлении «Дизайн» разверните раздел «Слайд-шоу» в библиотеке виджетов. Перетащите любое из виджетов слайд-шоу на страницу.

  2. В меню «Параметры» в разделе «Макет» найдите параметр «Лайтбокс» и убедитесь, что он включен.

    Элемент «Лайтбокс»
    Установите флажок рядом с параметром «Лайтбокс», если он еще не установлен.

  3. Пока открыто меню «Параметры», настройте виджет необходимым образом. Например, можно настроить отображение или скрытие кнопок «Назад» и «Далее», подписей и счетчика. При использовании лайтбокса полезно активировать кнопку «Закрыть». Установите флажок рядом с параметром «Кнопка "закрыть"».

    Кнопка «Закрыть»
    Кнопка «Закрыть» (с крестиком) отображается в правом верхнем углу слайд-шоу.

    При необходимости можно использовать инструмент «Выделение», чтобы переместить кнопку «Закрыть» в другое место. Когда посетители решат выйти из режима лайтбокса и закрыть модальное окно, они могут нажать кнопку «Закрыть» или клавишу Escape.

    Примечание.

    Чтобы изменить ширину рамки вокруг окна лайтбокса, выберите виджет слайд-шоу «Лайтбокс» и обновите настройки отступа на панели «Интервалы».

  4. Выберите меню «Файл» > «Предварительный просмотр страницы в браузере», чтобы проверить работу виджета слайд-шоу. Нажмите любую миниатюру, чтобы вызвать эффект лайтбокса, при котором главное изображение будет отображаться в модальном окне, а остальные страницы будут затемнены.

  5. Нажимайте кнопки «Далее» и «Назад» для просмотра изображений слайд-шоу.

  6. Завершив проверку слайд-шоу, выйдите из режима лайтбокса, нажав кнопку «Закрыть». Лайтбокс закроется, и отобразится остальное содержимое страницы.

  7. Закройте браузер и вернитесь в приложение Adobe Muse.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет