Кастомный слайдер на jQuery. Часть 1.

          Однажды, пребывая в поиске дизайнерских решений для рабочего проекта, набрел на слайдер из Joomla-шаблона от GavickPro (на момент написания поста демо-сайт был доступен по адресу http://demo.gavick.com/joomla16/apr2010).

Сам слайдер.

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

Итак, несмотря на то, что мне буквально с первого взгляда понравился увиденный слайдер, нужно было ответить себе на вопрос – как собственно я собираюсь его реализовать (поскольку я кодер и к дизайну имею весьма посредственное отношение)? Ответ - потихоньку :).

- “Профессор здесь живет?” -“Нет!” - “И тем не менее – позовите.” ©

Хотя соображений по поводу реализации не было, но, тем не менее, слайдер с демо-сайта мозолил глаза. Ну, собственно, знания javascript маленькие, но все-таки были, и я изначально нехотя начал думать о тяжеловесной реализации используя связку javascript/DOM.

jQuery

Буквально за пару дней до того, как я увидел слайдер, мне удалось немного узнать о jQuery, и я решил использовать эту надстройку над DOM. Причин такого решения было несколько. Во-первых, все готовые слайдеры, которые я находил в сети, были реализованы с использованием jQuery. Во-вторых, это удобство использования технологии (гибкость, легковесность кода), ну и в-третьих, почему-то мне сразу была интуитивно очевидна необходимость ее использования.

Потратив день на поиск в сети и изучение материалов по jQuery, которую я вообще не знал в отличии от скрипта, я приступил к реализации.

Конструктивно слайдер состоит из четырех частей, без учета стрелок навигации (необходимость наличия кнопок навигации осталась для меня непонятной, если есть меню? Разве только, как декоративный элемент, чтоб покликать-поиграться). Справа – сам блок слайдера изображений, блок  меню в центре и блок текстового контента слева. Снизу по всей ширине находится, назовем ее так “слайдер-строка” – интересный с точки зрения реализации элемент, который в данном случае я отброшу для упрощения.

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

Разработка

Я буду делать верстку в HTML4 c использованием спецификаций HTML и CSS. Итак, мой упрощенный слайдер в первом приближении будет иметь три составных части, которые я обозначу как: контент, меню и изображения. Причем меню будет пока пассивным (также для упрощения).

Мой вариант HTML-разметки выглядит следующим образом:

<div class="SliderBody">         

        <div id="CenterSection">

            <div class="ContentContainer">                 

                <div class="SliderContent" title="Первая панель">                     

                        <h2>Первая панель</h2>                           

                        <p>Абзац. Тект1.</p>                                          

                </div>                 

                …

      

            </div>

            <div class="ImageContainer">

                <div class="SliderImage">            

                    <img alt="" src="../../Content/Pic/Slider/simage1.png" />

                </div>

                …

            </div>

            <div class="SliderMenu">

                <ul>

                    <li>MenuItem1</li>

                    …

                </ul>

            </div>     

        </div>  

    </div>

Здесь нет ничего сложного. Все предельно упрощено и ясно. ContentContainer – блок для контента, ImageContainer – блок изображений, SliderMenu – блок меню.

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

CSS приводить не буду, так как кроме нюанса с контентом, вроде, больше ничего особенного нет. Кому надо – подождет вторую часть статьи, где будет полностью готовый слайдер, кому лень ждать – напишет сам (и правильно сделает).

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

Итак, скрипт:

(function ($) {

    $.fn.GetSibling = function () {

        return ($(this).next().length > 0) ? $(this).next() : $(this).siblings(':first');

    };

})(jQuery)

function ImagesAnimation(elem) {

    elem.delay(1800).fadeIn(300, function () {

        elem.delay(1500).fadeOut(300);

        ImagesAnimation(elem.GetSibling());

    });

};

function ContentAnimation(contentItem, menuItem) {

        contentItem.show().animate({ 'top': '-=250px' }, { duration: 200 });

        menuItem.addClass('selected').siblings().removeClass('selected');

        contentItem.delay(2000).animate({ 'top': '+=250px' }, { duration: 200, complete: function () {

            ContentAnimation(contentItem.GetSibling(), menuItem.GetSibling());

        }

        });

};

$(document).ready(

    function () {

       

        $('div .ImageContainer .SliderImage').hide();

        $('div.ContentContainer .SliderContent').css('top', '300px');

        ContentAnimation($('div.ContentContainer .SliderContent:first'), $('div.SliderMenu li:first'));

        ImagesAnimation($('div.ImageContainer .SliderImage:first'));

    });

Разбираем по порядку.

.GetSibling() – кастомный метод-расширения, котрый возвращает, по ситуации, следующего или первого родственника для вызывающего элемента DOM.
Если вас пугает внешний вид единственной инструкции данного метода – у меня для вас печальные новости … :).
На самом деле, я не уверен, в силу своих скромных знаний jQuery, правильно ли называть эту функцию расширяющим методом. Просто очень смахивает на метод-расширения родного С#.

ImagesAnimation(elem) – функция для прокрутки изображений. Обратите внимание на рекурсивный вызов в колбек-функции для .fadeIn().

ContentAnimation(contentItem, menuItem) – функция аналогичная предыдущей для прохода по контенту и по меню. Также вызывает саму себя в колбек-функции для .animate().
Здесь следует уделить внимание синтаксическим особенностям вызова колбек-функции для .animate(). Колбек-функция задается в опциях конфигурации через complete.

И наконец,  .ready()-функция для DOM – по готовности вызывает вышеперечисленные функции прокрутки. Прячет все изображения и сдвигает абсолютно-позиционированые блоки контента вниз на 300 точек (Без явного указания сдвига наблюдались глюки в Опере).

Продолжение следует...

Ccылки

Ссылки на ресурсы, которые помогли в изучении jQuery, да и вообще во всем макропроцессе.

http://anton.shevchuk.name/category/javascript/

http://www.linkexchanger.su/2008/61.html

http://ruseller.com/jqueryshpora.php - шпаргалка.

http://jsfiddle.net/ - ну и Фидель :), чтоб все протестировать на лету (очень помог мне).