Виджеты Слайд-шоу для сайта

Виджеты Слайд-шоу для сайта

Видеоурок по стандартному виджету программы Adobe Muse – слайд-шоу для сайта. Виджет слайд шоу в Adobe Muse содержит несколько сформированных по-умолчанию настроек (лайтбокс, миниатюры, полноэкранный режим и др), о которых пойдет речь в этом видеоуроке. Рассматриваем также подробно все отдельные параметры данного виджета.

Смотрите его прямо сейчас:

Этот следующий видеоурок будет посвящен следующему разделу библиотеки мини-приложений программы Adobe Muse – это раздел «Слайд-шоу».

Слайд-шоу для сайта. Обзор папки с виджетами.

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

Слайд-шоу для сайта. Отличия от виджетов раздела Композиции.

Давайте рассмотрим его возможности. И рассмотрим отличия этого виджета от виджета раздела «Композиции». Я перетаскиваю один из виджетов на рабочее поле программы, и перед нами появляется вот такие настройки. Настроек довольно много, в принципе, они все похожи на настройки виджета «Композиции», кроме одного большого нюанса – если в виджет «Композиции» мы могли добавлять совершенно любые другие виджеты: различные блоки, то в мини-приложение «Слайд-шоу» мы можем добавлять только изображения.

Слайд-шоу для сайта. Виджет “Лайтбокс” и Основные настройки.

Слайд-шоу для сайта. Добавление изображений.

Самая первая опция как раз и говорит об этом. Опция «Добавить изображения». Нажимая этот значок папки мы можем выбрать различные картинки, которые хотим добавить в данный виджет, и нажимаем «Открыть». Данные картинки загружаются и появляются вот здесь автоматически. В принципе, мы можем сразу зайти в режим «Просмотр» и посмотреть, как это все будет выглядеть. Перед нами появляются три миниатюры, при клике на которые, у нас появляется вот такой лайтбокс, и мы можем пролистывать картинки в этом лайтбоксе. Еще раз повторю, в данный виджет мы можем добавлять только картинки. Если мы захотим создать какой-либо прямоугольник с какой-либо заливкой и разместить его в целевой объект данного виджета (как мы это делали в виджете «Композиции»), то ничего не происходит – никакой подсветки. Мы просто размещаем этот прямоугольник поверх данного виджета. И данный виджет не подхватывает этот элемент.

Это мини-приложение или виджет работает немного по другим принципам. Давайте рассмотрим его настройки подробнее. Первую настройку мы уже рассмотрели – это опция «Добавить изображения».

Слайд-шоу для сайта. Главное изображение и новая миниатюра.

Вторая настройка – это «Новое главное изображение». При добавлении изображения в данный виджет мы можем выбирать «Уместить содержимое с сохранением пропорций» либо «Заполнить фрейм с сохранением пропорций». При выборе первой опции у нас содержимое, т.е. картинка заполняет вот этот фрейм с сохранением своих пропорций, допустим, я выберу какую-нибудь картинку, которая узкая и длинная. И нажму «Открыть». Картинка эта уместиться с сохранением пропорций, т.е. уместиться содержимое картинки по максимальной ее ширине, останутся вот такие свободные поля, которые картинка не занимает в данном фрейме. Если мы выбираем второй вариант «Заполнить фрейм с сохранением пропорций», то при добавлении той же самой картинки, она у нас уместиться по высоте. Края картинки обрежутся, но фрейм будет полностью заполнен. Вот в этом все отличие данных настроек.

Настройка «Новая миниатюра» – в принципе, точно такая же настройка, только она касается именно вот этих миниатюр – как будет размещаться изображение в данной миниатюре. Те же две опции «Уместить содержимое с сохранением пропорций» либо «Заполнить фрейм с сохранением пропорций». Эти две опции работают на все последующие добавляемые изображения.

Слайд-шоу для сайта. Переходы и воспроизведение.

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

Здесь же мы можем выставить «Скорость перехода» смены картинок. Можем выставить «Автоматическое воспроизведение» при загрузки с сайта. Есть опция «Возобновить через» позволяет возобновить показ через определенное количество секунд.

Опция «Автоматическое воспроизведение» – будет возобновляться воспроизведение через определенное количество секунд. Например, мы выставили здесь автоматическое воспроизведение через 3 секунды, после того, как все картинки пройдут один круг, т.е. покажутся все изображения, у нас будет пауза на определенное количество секунд. Например, пускай будет пауза в 6 секунд, т.е. между циклами воспроизведения будет 6 секунд паузы. Также мы можем выставить опцию «Воспроизвести однократно». Таким образом, у нас все картинки проиграют от первой до последней, и воспроизведение закончится.

Слайд-шоу для сайта. Перемешать и перелистывать.

Следующая настройка – это настройка «Перемешать». Мы можем перемешать картинки, и они будут показываться в произвольном порядке. Настройкой «Разрешить перелистывать» мы разрешаем  пользователю перелистывать картинки самостоятельно.

Слайд-шоу для сайта. Макеты.

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

Слайд-шоу для сайта. Составные элементы и редактирование.

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

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

Слайд-шоу для сайта. Виджет “Миниатюры”.

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

Я размещу на сайте настройку «Миниатюры». Как вы видите, здесь все тоже самое, все те же самые настройки. Только убрана галочка «Лайтбокс». При просмотре выглядит это вот так. Вы можете кликать на картинки, они будут показываться вот здесь рядом в окошке, т.е. уже не всплывают, как в лайтбоксе во весь экран, и экран затемняется, а показываются просто рядом.

Слайд-шоу для сайта. Виджет “Основной”.

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

Слайд-шоу для сайта. Виджет “Полноэкранный режим”.

Настройка «Полноэкранный режим». Очень уникальная настройка, отлично подходит для размещения изображений во весь экран. В настройках данного виджета вы видите, что установлен флажок «Во весь экран», отключен флажок «Лайтбокс» и отключены «Миниатюры». При просмотре выглядит это вообще потрясающе. У нас картинки размещены во весь экран браузера и сменяют друг друга при пролистывании. Эти кнопки можно убрать и оставить только «Автоматическое воспроизведение». И у нас будут автоматически сменяться фоны нашего сайта. Поверх данного фона вы можете размещать данный текст, любые изображения, любой контент, любые прямоугольники, любые фотографии и все, что вам придет в голову. Эти все объекты будут располагаться поверх данного мини-приложения.

Слайд-шоу для сайта. Виджет “Пустая”.

И последний элемент, который мы рассмотрим – это настройка «Пустая». В этой настройке у нас отключен «Лайтбокс», отключены «Миниатюры» и она представляет собой вот такую простую настройку, где есть только кнопки «Вперед» и «Назад», включен «Счетчик» и «Подписи». Как вы видите, данное мини-приложение использует в своем целевом объекте фрейм изображение. Как я и говорил, данное мини-приложение «Слайд-шоу» работает только с изображениями. Мы можем добавлять и размещать целевой объект в слайд-шоу только изображения. А также включать и отключать различные опции. Мы можем включать миниатюры, например, или сделать из данного пустого мини-приложения тот же самый лайтбокс, который мы рассматривали в самом начале.

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

Смотрите также:

Виджеты Панели Adobe MuseВиджеты Меню для сайта Adobe MuseВиджеты Композиции в Adobe MuseКнопка состояния – стандартный виджет Adobe MuseВиджеты Adobe Muse

Автор видеоурока
Дмитрий Шаповалов