Разработка

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

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

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

Почесав репу и посмотрев на ценнки на опенсорсные слайдеры, я принял решение, что каждый слайд у меня будет отдельной страницей и все их вместе я соберу в представлении (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').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');
        }
    );

Итого

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