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

    Продолжение...
    Итак, продолжаем эпопею со слайдером.

Доработка

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

Мой вариант.

Демо тут - https://sites.google.com/site/groundfored/home/slider

jQuery скрипт

    Начнем со скрипта, который притерпел значительные изменения по сравнению с вариантом из первой части в связи с расширением функциональности слайдера.

function RefreshSlider(index) {

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

// Останавливаем текущую анимацию контента и очищаем очередь всех последующих анимаций.

    $('div.ContentContainer .SliderContent').stop(true).hide();

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

    // Запускаем очередь анимации изображений с определенной позиции.

    ImagesAnimation($('div.ImageContainer .SliderImage').eq(index));

    // Запускаем очередь анимации контента с определенной позиции.

    ContentAnimation($('div.ContentContainer .SliderContent').eq(index),

                             $('div.SliderMenu li').eq(index));

};

    RefreshSlider(index) - функция, которая отвечает за "обновление" контента и скроллера изображений. Она имеет единственный управляющий параметр - index (индекс пункта меню) и вызывается всякий раз, когда пользователь осуществляет навигацию по меню или стрелкам слайдера.

function ImagesAnimation(imageItem) {

    imageItem.fadeIn(300).delay(3300).fadeOut(300,function () {

        ImagesAnimation(imageItem.GetSibling());

    });

};

    Немного изменил эту функцию по сравнению с первым вариантом, который был кривовато на скорую руку написан. Теперь рекурсивный вызов в колбеке для .fadeOut().

function BottomAnimation(bottomItem) {

    bottomItem.fadeIn(100);

    bottomItem.animate({ 'left': '-=795px' }, 3000, 'easeOutBounce', function () {

        $(this).delay(3000).fadeOut(300, function () { $(this).css('left', '800px'); });

        BottomAnimation($(this));

    });

};

    BottomAnimation(bottomItem) - функция для анимации нижней "слайдер-строки". В моем исполнении этот элемент функционирует несколько иначе чем в оригинале, но мне так больше понравилось. Для цикличности анимации используется рекурсия в колбек-функции для .animate(). Хочу отметить, что я использовал здесь плагин jQuery - Easing для необходимого мне расширения характеристик поведения функции .animate() (http://gsgd.co.uk/sandbox/jquery/easing/)

$(document).ready(

    function () {

        var imageContainer = $('div.ImageContainer');

        var menuItems = $('div.SliderMenu li');

        var index = 0;

        var leftArrow = $('#LeftArrow');

        var rightArrow = $('#RightArrow');

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

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

        BottomAnimation($('.BottomContainer .BottomContent'));

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

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

        leftArrow.click(function () {

            index = menuItems.filter('.selected').prev().index();

            index = (index != -1) ? index : menuItems.last().index();

            RefreshSlider(index);

        });

        rightArrow.click(function () {

            index = menuItems.filter('.selected').next().index();

            index = (index != -1) ? index : menuItems.first().index();

            RefreshSlider(index);

        });

        menuItems.click(function () {

            index = menuItems.index($(this));

            RefreshSlider(index);

        });

    });

    .ready() - функция  - также несколько изменилась. Добавились 5 переменных для удобства использования в функциях вместо селекторов. В секции "инициализации" к функциям анимации контента и изображений добавилась функция анимации нижней строки.
    За функционирование навигации по меню и стрелкам отвечают реализации в обработчиках событий .click() для соответствующих элементов разметки. Расписывать подробно пояснения к коду внутри обработчиков я не буду. Если вам что-либо не понятно - у меня для вас печальные новости... :) Отмечу лишь, что в конце каждой функции вызывается RefreshSlider(index), о которой было сказано выше.

Разметка 

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

<div id="Slider">

    <div class="SliderBody">

...

    Я использовал стандартную блочную верстку и все обернул в div-ы. Div с классом "SliderBody" - обертка для всего функционального содержимого.

...

<div class="SliderArrow" id="LeftArrow"><p><</p></div>

<div class="SliderArrow" id="RightArrow"><p>></p></div>
<div id="CenterSection">

...

    Далее идут стрелки навигации. Они выполнены просто в виде символов "<" и ">". Правильнее было бы их нарисовать, но, как я писал прежде в первой части, мне в принципе не понятна функциональная необходимость их наличия, поэтому я не стал заморачиваться по этому поводу.
   Следует отметить, что при таком подходе к реализации кнопок потребуется уделить больше внимания страничной разметке и CSS, по сравнению с вариантом, если бы кнопки были рисоваными.
    На данном этапе по моему замыслу тело слайдера конструктивно делится на три части: два блока стрелок и центральная часть между ними с айди "CenterSection".

...
<div class="ContentContainer">

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

<h1>...</h1>

<p>...</p>

<a href="..."></a>

</div>

<div class="SliderContent" title="Вторая панель">

...

</div>

...

</div>
...

    Далее по коду - блок с классом "ContentContainer", который содержит в себе наиболее информативную для пользователей составляющую наполнения слайдера - заголовки <h1>, текстовые блоки-абзацы <p> и ссылки <a>. Все перечисленные элементы разметки сгруппированы и размещены в блоках с классом "SliderContent".
    Блок контента является одной из четырех составляющих вышеупомянутого центрального блока слайдера (блока с айди "CenterSection"), другими словами - тело центрального блока конструктивно я разделил на четыре части, о которых будет сказано далее.

...
<div class="ImageContainer">

<div class="SliderImage">

<img src="..." />

</div>

       <div class="SliderImage">

...

</div>

...

</div>
...

    Блок с классом "ImageContainer" - это блок изображений справа. Второй внутренний блок центральной секции слайдера. Тут все просто - конструктивно состоит из div-ов класса "SliderImage", которые содержат элементы <img>.

...
<div class="SliderMenu">

<h2>...</h2>

       <ul>

<li>...</li>

...

       </ul>

</div>
...

   Далее идет третья составляющая часть центрального блока - блок меню "SliderMenu". Внутри содержится заголовок для меню <h2> и элемент списка - <ul>, в котором формируется контекст меню из центральной части слайдера.

...

<div id="BottomLine">

<div class="BottomContainer">

<span>Engineering & Development: </span>

<span class="BottomContent">...<a href="..."> </a></span>

</div>

</div>

...

    Четвертый и последний элемент центрального блока слайдера - "слайдер-строка" о которой я упоминал в первом посте. Возможно можно было обойтись меньшим количеством div-ов, но в данном случае, как видно, число div-ов не критично. Создавая этот элемент, как и в случае со стрелками навигации, я особо не старался, просто сделал, чтоб слайдер максимально соответствовал оригиналу.

    В блоке с классом "BottomContainer" содержатся элементы <span> и <a>.

...

</div>

</div>

</div>

    Ну и в завершении - не забыть закрыть все открытые div-ы.
    Конечно без CSS-стилей "картина" выглядит не полной, но это пост вышел слишком объемным. Возможно CSS отдельно распишу позже.