Создание слайдшоу (slideshow) и jQuery-каруселей. Часть 1

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

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

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

Можно было сделать баннер и с помощью javascript, но это занимало еще больше времени и требовало знание этого языка. С появлением фреймворка-javascript  jQuery это стало делать гораздо проще и быстрее, да и javascript стало знать необязательно.

У нас есть многострадальный сайт, который мы продолжим мучить:

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

Откроем файл нашей темы .info и сразу после описания регионов:

regions[content] = Content 
regions[right] = Right sidebar 
regions[left] = Left sidebar 
regions[footer] = Footer

Добавим свой регион для баннера:

regions[topbanner] = Top banner

Дальше нам предстоит выбрать какой именно баннер мы хотим. Если нас устроит простая смена изображений, то можно сделать слайдшоу через Views_slideshow. Установите этот модуль и его подмодуль Views Slideshow: SingleFrame и Views Slideshow: ThumbnailHover. Для их установки потребуется модуль Views,  я думаю он у Вас уже установлен.

Views Slideshow: SingleFrame - реализует слайд-шоу в одном блоке.

Views Slideshow: ThumbnailHover - слайд-шоу с меню из мини-фотографий или названий каждого слайда

Создадим новый вид, в поле Tags нужно прописать slideshow:

Теперь нужно добавить поля (fields) для отображения, я добавлю ФИО сотрудника, его должность и фотографию,  Вы можете добавить заголок (title) ноды, тело (body) ноды.

В фильтрах нужно добавить: Материал: опубликован, Тип материала = Сотрудник (либо Ваш тип материала Page, Story или любой другой созданный ранее).

Сортировку (Sort criteria) можно выполнить по Node: Post date = Descending.

Добавьте дисплей в блоке.

В Basic settings необходимо добавить настройку Style: slideshow. После этого появится окно настройки эффектов. Если не появилось, то нажмите "шестерню" после слов style:slideshow.

Настройки слайд-шоу следующие, для Slideshow mode: SingleFrame
Timer delay: время в милисекундах между переключением слайдов;
Initial slide delay offset: время в милисекундах до первого переключения;
Speed: скорость с которой слайды меняются;
Controls: текстовые переключатели слайдов;
Pager: числовые переключатели слайдов;
Image Counter: показывает какой по счету слайд отображается;
Items per slide: сколько слайдов отображается одновременно;
Effect: эффект с которым появляется слайд;

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

Настройки слайд-шоу следующие, для Slideshow mode: ThumbnailHover
Main frame fields: поля которые отображаются в слайде;
Breakout fields: поля которые отображаются в меню слайд-шоу. Можно добавить фотографии для слайд-шоу с пресетом меньшего размера, тогда можно сделать снизу меню из маленьких фотографий;
 

Остальные настройки такие же как и у Slideshow mode: SingleFrame.

Сохраняем вид и если мы создали display - block, то выводим в заранее созданный регион баннер.

Для настройки внешнего вида баннера необходимо подправить CSS файл, можно style.css Вашей темы, но это прийдется делать самостоятельно и в соответствие с задуманной цветовой схемой.

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