Однажды, пребывая в поиске дизайнерских решений для рабочего проекта,
набрел на слайдер из
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, да и вообще во всем макропроцессе.
