Создание горизонтального слайдера в Drupal 7. Views + Views Horizontal Slider.

image

09.05.12
Comments 10

На сегодня я приготовил урок, в котором мы создадим горизонтальный слайдер изображений с помощью модулей Views и Views Horizontal Slider. Модуль Views Horizontal Slider позволяет нам создать новый формат отображения. По умолчанию в настройках Views доступны такие форматы как сетка, таблица и др.. Посмотреть на работу данного модуля вы можете на этой странице. Итак, давайте ка начнем уже настраивать сие чудо.

Для реализации задуманного нам понадобятся следующие модули:

  1. Views
  2. Views Horizontal Slider
  3. Ctools

Закачайте эти модули в папку sites/all/modules и включите их на странице управления модулями.

Теперь нам нужно создать новые стили для показа изображений, для этого пройдите в «Конфигурация -> Стили изображения» и создайте новый стиль, назовите его «slide».  Дальше нам следует задать эффекты к этому стилю. Из раскрывающегося списка выберите эффект «Масштабирование и обрезка».

Слайдер

В настройках эффекта задаем высоту и ширину, пускай они будут по 300 пикселей.

Слайдер

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

Слайдер

На этом со стилями изображений все, нажмите на кнопку «Обновить стиль».

Слайдер

Теперь нам нужно добавить новый тип материалов, пройдите в «Структура -> Типы материалов» и создайте новый тип материалов и назовите его ну скажем «Слайдер».

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

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

Теперь приступаем к настройкам Views. Пройдите в «Структура -> Представления». Создайте новое представление.

Имя представления: Слайдер

Показать: «Содержимое»

 Типа: «Слайдер»

 Отсортировать новые «Сначала»

Создать страницу:

Заголовок: Слайдер изображений

Путь: slider

Формат отображения: «Horizontal Slider» из «Поля».

Элементов для отображения: 5

Использовать постраничную навигацию: нет

Создать ссылку в меню:

Меню: «Навигация»

Текст ссылки: Слайдер

Слайдер

Сохраните настройки слайдера.

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

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

Итак, добавьте новое поле «Содержимое: Slide», то есть то поле для загрузки изображений которое мы создали в типе материала «Слайдер».

В настройках поля снимите галочку с пункта «Создать метку».

В стиле изображения укажите стиль наш стиль «slide».

Слайдер

Нажмите на кнопку «Применить».

Добавьте последнее поле  «Содержимое: Body».

Снимите галочку с пункта «Создать метку»

Средство форматирования: обрезанный текст, количество знаков – 300.

Слайдер

Нажмите на кнопку «Применить».

Теперь можете сохранить настройки всего отображения и посмотреть на то, что у нас получилось.

Комментарии

di 06.06.12

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

admin 06.06.12

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

Тимур 11.08.12

Все прекрасно работает, спасибо! Хочу вывести его на главную страницу в виде блока чтобы после него шел текст о компании, не получается, текст не хочет вставать под слайдер, отображается рядом... как это победить не подскажете?

Олег 21.08.12

после сохранения настроек слайдера, перед добавлением полей -
Strict warning: Declaration of views_horizontal_slider_style_plugin::options_validate() should be compatible with that of views_plugin_style::options_validate() in require_once() (line 10 of C:\Program Files (x86)\VertrigoServ\www\drupal.ua\sites\all\modules\views_horizontal_slider\views_horizontal_slider_style_plugin.inc).

nitskel 29.08.12

всё делал по инструкции, сначала вышло сообщение о том, что отсутствует файл views-view.tpl.php после того как я его добавил в директорию /sites/all/modules/views/theme
ошибка исчезла, но теперь показывается просто белое поле вместо слайдов

Гость 10.10.12

Спасибо за пост. Побольше бы таких!

Марина 15.10.12

А как такой слайдер подключить к Drupal 6?

Михаил 06.09.13

Классно получилось!
А как сделать ссылки на термины таксономии? чтобы при нажатии на картинку перейти в раздел каталога?

Заранее благодарен,
Михаил.

Михаил 16.10.13

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

Дима 15.05.15

Вот про это не понял, это как сделать? подскажите пожалуйста.

Комментировать