Слайдеры все больше и больше завоёвывают симпатии пользователей интернет. И правда, уже тяжело представить себе сайт на котором нет слайдера. Это обусловлено тем, что слайдер позволяет нам вывести больше информации, тем самым сэкономив место на странице. Конечно же, места у нас много, но согласитесь куда приятнее наблюдать, как картинка меняется чем скролить вниз все эти изображения, а потом по необходимости возвращаться обратно.
Для реализации слайдера на обычных страницах существует множество скриптов и плагинов, остаётся только выбрать на свой вкус.
Возникает простой вопрос: «А что делать, если слайдер нужен внутри конкретного материала?». Для этого можем использовать модуль Field slaid show.
Установка
Скачать модуль вы можете перейдя по данной ссылке, а со всеми способами его установки вы можете ознакомиться прочитав статью на нашем блоге.
Скачиваем и устанавливаем этот модуль, а также не забываем его включить.
Но на этом установка модуля не окончена, также необходимо скачать библиотеку Cycle Plugin и залить ее в папку jquery.cycle, которую необходимо создать в /sites/all/libraries/.
Если всё сделали правильно, то перейдите в «Отчёты» и выберите там ссылку «Отчёт о состоянии» напротив «JQuery Cycle plugin» будет написано «Установлено».
Настройка модуля
Модуль добавляет к медиа полям, таким как изображение, новый формат отображения.
Но для начала давайте перейдём к настройкам полей и добавим поле с картинками.
Для этого переходим в раздел «Структура», находим подраздел «Типы материалов», наводим на необходимый нам тип, и нажимаем на ссылку «Управление полями»
В открывшимся окне добавляем новое поле с типом «Изображение». В настройках поля выставляем количество изображений и сохраняем настройки.
Теперь переходим на страницу управление отображениями.
На этой странице находим наше поля «Изображение» и в формате выставляем «Слайд шоу».
При нажатии на шестерёнку рядом с этим полем откроются настройки слайдера:
- Стиль изображения — указывает в каком виде будет выводиться основная картинка слайд-шоу.
- Изображение как ссылка на — можно сделать из ссылку на само содержимое, модальное окно, в нашем случае colorbox или же на сам файл изображения. Если выбрать “Colorbox” то по клику на изображение оно будет открываться в окне, а также появятся дополнительные настройки:
- Colorbox стиль изображения — аналогичен настройке «Стиль изображения» только в этом случае выбирается стиль для выплывающего окна
- Colorbox slideshow - автоматическое пролистывание картинок в окне. Colorbox slideshow speed — время задержки при пролистывании
- Colorbox transition – эффект появления окна
- Colorbox transition speed – скорость появления окна
- Подпись – выводит подпись картинки, на выбор можно вывести или Title изображения, или Alt в зависимости от того что у вас включено в настройках поля.
- Transition effect — эффект пролистывания слайдов.
- Скорость перемещения — скорость пролистывания слайдов
- Timeout – время задержки на каждом слайде
- Порядок – порядок появления изображений
- Create prev/next controls — если активна добавляет на страницу навигационные кнопки, также при активации появляются дополнительные настройки
- Create play/pause button — добавляет к навигационным кнопкам кнопки Play и pause.
- Prev/next controls position — можно выставить место расположения навигационных кнопок, перед слайдером или после него.
- Pause on hover — если активна, то при наведении слайдер не будет пролистываться дальше
- Activate on hover — при наведении слайдер будет активен.
- Постраничный навигатор — настройка вывода навигатора в слайдере. На ней стоит остановиться более подробно.
Постраничный навигатор
По умолчанию на выбор есть 4 типа постраничного навигатора для слайд-шоу.
Первый называется «Нет» без постраничного навигатора, если выбрана эта настройка то навигатора попросту не будет.
Второй называется «Slider number», и при активации его на странице будут выведены цифры с номерами слайдера, а также появится дополнительная настройка, отвечающая за расположения навигатора.
Следующая настройка называется «Image», у неё также есть настройка расположения навигатора и добавляется выбор стиля вывода изображения. При выборе этой настройки в качестве навигатора будут выводиться изображения слайдов.
Последний и самый масштабный навигатор называется «Carousel». Если выбрать его, то в качестве навигатора будет выступать мини слайдер.
Настройки Carousel:
Carousel: Number of visible images — количество отображаемых навигационных изображений
Carousel: Number of images to scroll by — количество пролистывания навигационных изображений
Carousel: Transition speed — скорость пролистывния
Follow active slide — если активна, то навигационная панель будет меняться вместе со слайдером
Vertical Carousel — если активна создаёт вертикальную строку навигаций
На этом настройки модуля окончены, настраиваем на своё усмотрение и проверяем что у нас получилось.
Проверка результатов
Создадим материал и загрузим в него несколько изображений. Если всё сделали правильно, то наши изображения будут меняться автоматически ( в зависимости от ваших настроек).
Послесловие
Модуль field slaid show позволяет реализовать симпатичный слайдер внутри ноды, а большое количество настроек и интеграция его с colorbox позволяет гибко настраивать его под конкретный проект, а для полного наслаждения этим модулем рекомендуем установить все плагины JQuery.
