Продолжение...
Итак, продолжаем эпопею со слайдером.
Ну и в завершении - не забыть закрыть все открытые div-ы.
Конечно без CSS-стилей "картина" выглядит не полной, но это пост вышел слишком объемным. Возможно CSS отдельно распишу позже.
Итак, продолжаем эпопею со слайдером.
Доработка
На данный момент мы имеем слайдер, который состоит из трех частей: контента, пассивного меню и скроллера изображений. Все действия по доработке будут направлены на максимальное приближение его дизайна и функционала к соответственным свойствам образца от 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), о которой было сказано выше.
За функционирование навигации по меню и стрелкам отвечают реализации в обработчиках событий .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">
<div id="CenterSection">
...
Далее идут стрелки навигации. Они выполнены просто в виде символов "<" и ">". Правильнее было бы их нарисовать, но, как я писал прежде в первой части, мне в принципе не понятна функциональная необходимость их наличия, поэтому я не стал заморачиваться по этому поводу.
Следует отметить, что при таком подходе к реализации кнопок потребуется уделить больше внимания страничной разметке и CSS, по сравнению с вариантом, если бы кнопки были рисоваными.
На данном этапе по моему замыслу тело слайдера конструктивно делится на три части: два блока стрелок и центральная часть между ними с айди "CenterSection".
Далее по коду - блок с классом "ContentContainer", который содержит в себе наиболее информативную для пользователей составляющую наполнения слайдера - заголовки <h1>, текстовые блоки-абзацы <p> и ссылки <a>. Все перечисленные элементы разметки сгруппированы и размещены в блоках с классом "SliderContent".
Блок контента является одной из четырех составляющих вышеупомянутого центрального блока слайдера (блока с айди "CenterSection"), другими словами - тело центрального блока конструктивно я разделил на четыре части, о которых будет сказано далее.
Блок с классом "ImageContainer" - это блок изображений справа. Второй внутренний блок центральной секции слайдера. Тут все просто - конструктивно состоит из div-ов класса "SliderImage", которые содержат элементы <img>.
Следует отметить, что при таком подходе к реализации кнопок потребуется уделить больше внимания страничной разметке и CSS, по сравнению с вариантом, если бы кнопки были рисоваными.
На данном этапе по моему замыслу тело слайдера конструктивно делится на три части: два блока стрелок и центральная часть между ними с айди "CenterSection".
...
<div class="ContentContainer">
<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="ImageContainer">
<div class="SliderImage">
<img src="..." />
</div>
<div class="SliderImage">
...
</div>
...
</div>
...
...
Блок с классом "ImageContainer" - это блок изображений справа. Второй внутренний блок центральной секции слайдера. Тут все просто - конструктивно состоит из div-ов класса "SliderImage", которые содержат элементы <img>.
...
<div class="SliderMenu">
<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 отдельно распишу позже.
