Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Установка и настройка модуля Field slaid show на drupal 7

Раздел: 

Слайдеры все больше и больше завоёвывают симпатии пользователей интернет. И правда, уже тяжело представить себе сайт на котором нет слайдера. Это обусловлено тем, что слайдер позволяет нам вывести больше информации, тем самым сэкономив место на странице. Конечно же, места у нас много, но согласитесь куда приятнее наблюдать, как картинка меняется чем скролить вниз все эти изображения, а потом по необходимости возвращаться обратно.

Слайдер из полей при помощи модуля Field slaid show

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

Возникает простой вопрос: «А что делать, если слайдер нужен внутри конкретного материала?». Для этого можем использовать модуль Field slaid show.

Установка

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

Скачиваем и устанавливаем этот модуль, а также не забываем его включить.

Установка модуля

Но на этом установка модуля не окончена, также необходимо скачать библиотеку Cycle Plugin и залить ее в папку jquery.cycle, которую необходимо создать в /sites/all/libraries/.

Если всё сделали правильно, то перейдите в «Отчёты» и выберите там ссылку «Отчёт о состоянии» напротив «JQuery Cycle plugin» будет написано «Установлено».

Отчет о состоянии

Настройка модуля

Модуль добавляет к медиа полям, таким как изображение, новый формат отображения.

Но для начала давайте перейдём к настройкам полей и добавим поле с картинками.

Для этого переходим в раздел «Структура», находим подраздел «Типы материалов», наводим на необходимый нам тип, и нажимаем на ссылку «Управление полями»

Управление полями

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

Настройка поля с изображением

Теперь переходим на страницу управление отображениями.

Управление отображением

На этой странице находим наше поля «Изображение» и в формате выставляем «Слайд шоу».

Настройка отображения поля с картинкой

При нажатии на шестерёнку рядом с этим полем откроются настройки слайдера:

  1. Стиль изображения — указывает в каком виде будет выводиться основная картинка слайд-шоу.
  2. Изображение как ссылка на — можно сделать из ссылку на само содержимое, модальное окно, в нашем случае colorbox или же на сам файл изображения. Если выбрать “Colorbox” то по клику на изображение оно будет открываться в окне, а также появятся дополнительные настройки:
    1. Colorbox стиль изображения — аналогичен настройке «Стиль изображения» только в этом случае выбирается стиль для выплывающего окна
    2. Colorbox slideshow - автоматическое пролистывание картинок в окне. Colorbox slideshow speed — время задержки при пролистывании
    3. Colorbox transition – эффект появления окна
    4. Colorbox transition speed – скорость появления окна
  3. Подпись – выводит подпись картинки, на выбор можно вывести или Title изображения, или Alt в зависимости от того что у вас включено в настройках поля.
  4. Transition effect — эффект пролистывания слайдов.
  5. Скорость перемещения — скорость пролистывания слайдов
  6. Timeout – время задержки на каждом слайде
  7. Порядок – порядок появления изображений
  8. Create prev/next controls — если активна добавляет на страницу навигационные кнопки, также при активации появляются дополнительные настройки
    1. Create play/pause button — добавляет к навигационным кнопкам кнопки Play и pause.
    2. Prev/next controls position — можно выставить место расположения навигационных кнопок, перед слайдером или после него.
  9. Pause on hover — если активна, то при наведении слайдер не будет пролистываться дальше
  10. Activate on hover — при наведении слайдер будет активен.
  11. Постраничный навигатор — настройка вывода навигатора в слайдере. На ней стоит остановиться более подробно.

Постраничный навигатор

По умолчанию на выбор есть 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.