Разработка

Простейший слайдер для Drupal на jQuery

Постановка задачи

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

Создаю слайдер

Почесав репу и посмотрев на ценнки на опенсорсные слайдеры, я принял решение, что каждый слайд у меня будет отдельной страницей и все их вместе я соберу в представлении (views), которое будет засунуто в блок и помещено на морде сайта.
Всю красоту сделаю в CSS, а всю движуху в jQuery, благо он в Drupal идёт из коробки.

Создаю тип контента для слайдера (CCK)

Дабы свести к минимуму вероятность смерти вёрстки слайдера (особенно это актуально для главной страницы сайта) делаю следующий тип контента, который я обозвал слайдер для главной страницы:

  • Название — стандартный заголовок материала — тут будет жить название табиков слайдера
  • Содержимое — стандартное body материала на друпале — тут будет жить основной текст каждого слайда
  • Изображение слайда — поле типа файл с виджетом типа изображение. В свойствах поля ограничиваю размер в пикселях загружаемых картинок под нарисованные дизайнером.
  • Порядок вывода слайда — целочисленное значение, по которому будет выполняться сортировка при выводе в представлении. В настройках поля вбиваю значния от 1 до 4-х и предлагаю будущему администратору выбрать значение из списка. У меня 4 слайда — если у кого больше, то соответственно подстраиваем под свои требования.

После создания cck'еины создаю четыре ноды и набиваю их тестовым контентом.

Теперь приступаю к созданию представления (views)

Тут всё почти просто.
Для вывода контентной части слайда создаю простейший вьюс с видом типа блок, у которого в полях два поля: Изображение слайда и Основная часть материала.
В фильтры вставляю ограничение на тип материала = «Слайдер для главной страницы» и не забываю про «Опубликовано или админ». Не забываю ограничить количество выводимых материалов до 4-х и убрать пэйджер.
В критерии сортировки добавляю сортировку по полю «Порядок вывода слайда».
Сохраняю, тестирую, ставлю блок на главную страницу.
Теперь нужно добавить названия слайдов, на которые будет совсем не плохо навесить всю логику работы слайдера.
Делаю это путём добавления в созданное выше представление ещё одно вида типа Вложение (attachment). Переопределяю поля в которые для этого вида вывожу только заголовок материала без всяких ссылок. Все прочие критерии сортировки и фильтры остаются прежними и заходят на автомате. В настройках вложения говорю что его нужно прикрепить до и к ранее созданному блоку.
Сохраняюсь и вижу вот такую красоту как на картинке.

Темизация и логика работы слайдера.

Про css сильно глубоко рассказывать не буду, так как это отдельная песня, а вот про динамику немного расскажу.
Мой слайдер будет листаться вертикально по нажатии на заголовки слайдов. Листать буду с помощью jQuery на фиксированное количество пикселей вверх или вниз. Всё, что не влазит в текущую область, выделенную дизайнером под слайд, будет злобно overflow:hidden;
Первым делом к теме подключаю файл с JavaScript, в котором будет сидеть весь код, отвечающий за работу. Делается это через .info-файл темы строчкой типа scripts[] = js/mpf1.js
Код в файле оборачиваю в стандартный для jQuery $(document).ready(function() {}); В 7-й версии несколько поменялась эта обёртка, но всё остальное работает без изменений.
Пишу свою функцию, которая будет отвечать за логику. В моём случае она должна анимировать координату Y для блока с основным контентом, который по сути представляет собой непрерывную вертикальную ленту. Т.к. каждый слайд фиксированной высоты, то моя функция получилось очень простой. В первой части функции в зависимости от номера слайда я выбираю значение к которому с помощью animate() прокручиваю слайд:

    function jsSetSlider(n){
        switch(n){
            case 2:
                dy=-281;
            break;
            case 3:
                dy=-562;
            break;
            case 4:
                dy=-843;
            break;
            default:
                dy=0;
            break;
        }
        $('#preface-top .attachment .views-row').removeClass('active');
        $('#preface-top .attachment .views-row-'+n).addClass('active')
        obj=$('#preface-top .view-front-production .view-content:last-child');
        $(obj[1]).animate({top:dy});
    }

Назначаю активный класс на первый заголовок.
    $('#preface-top .attachment .views-row-1').addClass('active');
Следом навешиваю обработчики на нажатие, и если нужно то и на наведение мыша на слайд.
    $('#preface-top .attachment .views-row-1').click(function(){jsSetSlider(1)});
//… повторяю столько раз, сколько нужно
    $('#preface-top .attachment .views-row-4').click(function(){jsSetSlider(4)});

Для последнего элемента пришлось добавить логики для наведения мышки что-бы корректно отрисовать дизайн слайдера.
    $('#preface-top .attachment .views-row-4').hover(
        function(){
            obj=$('#preface-top .view-front-production .view-content:last-child');
            $(obj[1]).addClass('last-active');
        },
        function(){
            obj=$('#preface-top .last-active').removeClass('last-active');
        }
    );

Вот вроде и всё. Что получилось — можно глянуть на сайте, который очень скоро будет отпущен в люди. Там же желающие могут глубже окунуться в мой CSS и JavaScript, который для сайтов добывается очень и очень просто.

Итого

Таким способом можно реализовать сколь угодно сложные листалки просто усложняя функцию перехода — можно листать и по горизонтали, и по вертикали. При желании можно сделать переходы через прозрачность — благо jQuery всё это позволяет.

 
 
30.06.2011 — 01:17

Комментарии (11)

Аватар пользователя Stan
30.06.2011 — 12:02
1
 
 

Перенесите в «Разработку»
Укажите в тэгах версию Drupal (Drupal 6 или Drupal 7)

Аватар пользователя varvashenia
30.06.2011 — 12:08
0
 
 

Подправил.
Сделано в шестёрке, но с минимальными изменениями будет работать и в 7-й версии.

Аватар пользователя xandeadx
30.06.2011 — 12:14
4
 
 

неплоха бы демо

Аватар пользователя varvashenia
30.06.2011 — 12:24
1
 
 

есть даже лучше — бетта — ссылку скромно вставил в конце — возможно совсем незаметна.

Аватар пользователя Dan
30.06.2011 — 13:08
1
 
 

Не по теме — я бы сделал hover-картинку по пунктиру, а то оно как-то обрезано смотрится.

Аватар пользователя goodboy
07.07.2011 — 22:39
1
 
 

1.

function jsSetSlider(n){
        switch(n){
            case 2:
                dy=-281;
            break;
            case 3:
                dy=-562;
            break;
            case 4:
                dy=-843;
            break;
            default:
                dy=0;
            break;
        }

я бы упростил до

function jsSetSlider(n){
        dy = (n>=2 && n<=4) ? (n-1)*-281 : 0;
}

да и 281 наверное можно извлечь как атрибут какого-нибудь элемента

2. Может заказчику и нравится работа слайдера — мне, как пользователю, не очень.
Я, допустим, хочу сразу посмотреть Молочную продукцию. Слайдер прокручивает 3 кадра, зачем нужно это мельтешение. А если пунктов будет 8? Это, пока дождешься, что все прокрутится, со страницы уйдешь…

3.jCarousel выдает ошибку
jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…

Аватар пользователя Dan
07.07.2011 — 22:56
1
 
 

я бы упростил до…

Или даже:

dy = (n-1) > 0 ? (n-1) * $(obj[1]).height() : 0;

Аватар пользователя varvashenia
07.07.2011 — 23:18
0
 
 

спасибо за баг в п.3 — поправил.
А реально сильно тормозит слайдер? На доступном мне самом слабом из имеющихся компьютеров amd sempron полёт нормальный.
что касается height(), то что-то похожее и было, но в каком-то из браузеров столкнулся с неадекватным поведением на пару пикселей и просто перебил на константы — сейчас уже знаю, что это была ошибка в ccs, но оставил как есть. Проще — меньше шансов что сломается.

Аватар пользователя goodboy
08.07.2011 — 18:27
0
 
 

Вопрос про торможение мне, наверное. Я бы не сказал, что он тормозит. Кадры сменяются плавно, красиво. Технически все здорово. Эргономически от меня смысл прокрутки ускользает

Аватар пользователя varvashenia
08.07.2011 — 19:12
0
 
 

Лично себе я бы сделал показать сразу без эффектов, без табов и без особого дизайна (как мой блог). Но заказчикам движуха (особенно на главной) нравится :)

Аватар пользователя VVS
13.07.2011 — 17:23
0
 
 

Логотип со сдвоенным яйцом напомнил Чернобыль…