http://lifeexample.ru/download_count.php?url=upload/jquery-karusel/jquery.CarouselLifeExample.js.zip
Здравствуйте, уважаемые читатель блога LifeExample. Очень долго я не мог выделить время на подготовку материала и написание этой статьи, но теперь все готово и я рад представить вашему вниманию очередной плагин — "jQuery карусель от Lifeexample.ru".
Идея написать плагин карусели, родилась одновременно с желанием сделать на блоге галерею постов. Почитав, что пишут люди, я понял, что без ротатора картинок тут не обойтись. В простонародье ротатор картинок чаще называют "Карусель картинок", ну а поскольку в наше время необычайно популярны различного рода библиотеки и фреймворки, упрощающие реализацию фантазий разработчиков, сегодня мы будем самостоятельно создавать плагин для jquery — карусель. В будущем мы разовьем эту тему и применим jquery карусель при написании плагина галереи постов для wordpress.
Демо-версия плагина:
Начало создания jquery карусели (Шаг 1)
По сути своей плагинами мы называем методы объекта jQuery. Т.е. при создании нового плагина нам нужно создать новый метод объекта, что делается таким образом:
(function($){
$.fn.Carousel = function(options) {
alert(“Плагин готов :) ”);
};
})(jQuery);
Это каркас любого плагина, и в нем мы определили метод Carousel. Теперь из исполняемого скрипта мы можем обратиться к этому методу привычным всем способом:
Например, вот так:
1
$('.wrap-container'). Carousel();
Или вот так:
1
$('.wrap-container').find('.container').Carousel().css('background','green');
Во втором примере я использовал цепочку выполнения методов.
Не смотря на то, что наш выполнится успешно, он находится в зачаточном состоянии и поэтому последнее событие css('background','green') вызванное после Carousel(), не сработает.
Для того чтобы полноценно использовать плагин стало возможным и в цепочках методов достаточно внести в его содержимое такой код:
return this.each(function() {
if (options) {
$.extend(settings, options); //устанавливаем пользовательские настройки
}
});
Это заставит наш метод возвращать объект, для дальнейшей обработки, и использование последовательности методов станет доступным.
Обратите внимание, что мы при объявлении метода получаем параметр option, такой параметр нужен любому мало-мальски полезному плагину. В этом параметре будет передан объект с пользовательскими настройками.
Если пользовательские настройки не переданы, будут использоваться назначенные по умолчанию. Давайте добавим массив атрибутов, необходимых для работы плагина.
var settings = {
attr1: "attribute-1",
attr2: "attribute-2",
attr3: "attribute-3",
};
alert(settings.attr1+'n'+settings.attr2+'n'+settings.attr3);
Теперь можно обратиться к плагину таким образом
$('.wrap-container'). Carousel(){
attr1: "SetMyattribute",
attr2: "attribute-2",
attr3: "none",
}
В результате метод $.extend(settings, options); заменит параметры по умолчанию определенные в объекте settings, пользовательскими. В случае не обнаружения пользовательских параметров в силу вступят определенные по умолчанию:
создание карусели jquery.jpg
Как видите атрибут attr2 остался определенным по умолчанию.
Теперь, когда мы имеем каркас для написания плагина самое время начать его разработку.
Как реализовать jQuery карусель (шаг2)
В задачи карусели входит циклическая бесконечная прокрутка имеющихся элементов карусели. Элементами могут являться:
Картинки;
Ссылки;
Блоки с текстом;
Все вместе.
Карусель на jquery, должна уметь вращаться как с участием пользователя по нажатию на навигационные кнопку "Вперед" и "Назад" так и автоматически.
Ориентация карусели будет иметь два положения:
Горизонтальное;
Вертикальное.
Ну и ни один ротатор картинок не обойдётся без настройки количества выводимых элементов, скорости прокрутки и количества прокручиваемых элементов.
Разобравшись с целями и задачами модно приступать к непосредственному созданию плагина карусель jQuery.
Делаем jQuery карусель своими руками
Все досконально я описывать не буду, поскольку по привычке снабдил код подробными комментариями, но все же основные два момента освещу.
Первое:
Карусель представляет собой каркас структуру из основного блока в который вложен маркированный список:
<div class="container">
<ul class="carousel">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
Также для осуществления навигации по элементам карусели можно добавить два любых HTML объекта:
1
2
<button id="prev">Назад</button>
<button id="next">Вперед</button>
Впоследствии нужно будет передать id этих объектов в параметры плагина, но об этом чуть позже.
Второе о чем хочу сказать это об алгоритме вращения, и о том, как он реализован.
Чтобы создавать эффект вращения, мы при нажатии на кнопки будем копировать элементы с одной стороны ленты в другую, затем сдвигать ленту по направлению движения, и после того как она зафиксируется, удалять ненужные скрывшиеся элементы.
Обратите внмание: элементы (li) нужно копировать, а не переносить, только так мы сможем добиться эффекта бесконечности.
Ну из основных знаний пожалуй все, теперь я предоставляю вам код плагина с комментариями, по которому я уверен вам проще будет самостоятельно разобрать на примере его работы.
/********************************************************/
/* */
/* jquery.CarouselLifeExample.js */
/* Плагин "Карусель от LifeExample.ru" для jQuery */
/* Автор: Авдеев Марк */
/* 2012г. */
/* */
/* Для ипользования плагина необходимо определить */
/* контейнер и вложить в него маркерованный список: */
/* */
/* <div class="container"> */
/* <ul class="carousel"> */
/* <li>1</li> */
/* <li>2</li> */
/* <li>3</li> */
/* <li>4</li> */
/* <li>5</li> */
/* <li>6</li> */
/* </ul> */
/* </div> */
/* После чего можно указать параметры для использования */
/* плагина */
/* $('.container').Carousel({ */
/* visible: 3, //количество отображаемых позиций 3 */
/* rotateBy: 1, //прокручивать по 1 */
/* speed: 1000, //скорость 1 секунда */
/* btnNext: null, // кнопка вперед не назначена */
/* btnPrev: null, // кнопка назад не назначена */
/* auto: true, // авто прокрутка включена */
/* margin: 10, // отступ между позициями */
/* position: "h",// расположение по горизонтали */
/* dirAutoSlide: false //направление движения */
/* }); */
/* Или использовать параметры по умолчанию */
/* $('.container').Carousel(); */
/* */
/********************************************************/
(function($){
$.fn.Carousel = function(options) {
// Настройки по умолчанию
var settings = {
visible: 3, //количество отображаемых позиций 3
rotateBy: 1, //прокручивать по 1
speed: 1000, //скорость 1 секунда
btnNext: null, // кнопка вперед не назначена
btnPrev: null, // кнопка назад не назначена
auto: true, // авто прокрутка включена
margin: 10, // отступ между позициями
position: "h",// расположение по горизонтали
dirAutoSlide: false //направление движения в перед для автопрокрутки
};
return this.each(function() {
if (options) {
$.extend(settings, options); //устанавливаем пользовательские настройки
}
// определяем переменные
var $this = $(this);//родительский элемент (Блок в котором находится карусель)
var $carousel = $this.children(':first');// получаем дочерний элемент (UL) т.е. саму карусель
var itemWidth = $carousel.children().outerWidth()+settings.margin; // вычисляем ширину элемента
var itemHeight = $carousel.children().outerHeight()+settings.margin;// вычисляем высоту элемента
var itemsTotal = $carousel.children().length; // получаем общее количество элементов в каруселе
var running = false; //останавливаем процесс
var intID = null; //отчищаем интервал
//size — размер для вычисления длины, зависит от ориентации карусели
var size = itemWidth;
if(settings.position=="v") size = itemHeight;
//Если карусель вертикальная то
if(settings.position=="v")
$this.css({
'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
'overflow': 'hidden', // прячем все, что не влезает в контейнер
'height': settings.visible * size + 'px' ,// ДЛИНУ контейнера ставим равной ширине всех видимых элементов
'width': itemWidth-settings.margin //Ширина контейнера равна ширине элемента
});
else
$this.css({
'position': 'relative', // необходимо для нормального отображения в ИЕ6(7)
'overflow': 'hidden', // прячем все, что не влезает в контейнер
'width': settings.visible * size + 'px' ,// ширину контейнера ставим равной ширине всех видимых элементов
'height': itemHeight-settings.margin
});
//вычисляем расстояние отупа от каждого элемента
if(settings.position=="v")
$carousel.children('li').css({
'margin-top': settings.margin/2+ 'px',
'margin-bottom': settings.margin/2+ 'px',
'float': 'left',
'width': '60px',
'height': '40px',
'padding': '5px',
'background': '#E2E2E2',
'font': '20px Calibry italic',
'color':'green',
'border': 'gray 1px solid'
});
else
$carousel.children('li').css({
'margin-left': settings.margin/2+ 'px',
'margin-right': settings.margin/2+ 'px',
});
// в зависимости от ориентации, увеличиваем длину или ширину карусели
if(settings.position=="v")
$carousel.css({
'position': 'relative', // разрешаем сдвиг по оси
'height': 9999 + 'px', // увеличиваем лену карусели
'left': 0,
'top': 0
});
else
$carousel.css({
'position': 'relative', // разрешаем сдвиг по оси
'width': 9999 + 'px', // увеличиваем лену карусели
'top': 0,
'left': 0
});
//прокрутка карусели в наравлении dir [true-вперед; false-назад]
function slide(dir) {
var direction = !dir ? -1 : 1; // устанавливаем заданное направление
var Indent = 0; // смещение (для ul)
if (!running) {
// если анимация завершена (или еще не запущена)
running = true; // ставим флажок, что анимация в процессе
if (intID) { // если запущен интервал
window.clearInterval(intID); // очищаем интервал
}
if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
/*
* вставляем после последнего элемента карусели
* клоны стольких элементов, сколько задано
* в параметре rotateBy (по умолчанию задан один элемент)
*/
$carousel.children(':last').after($carousel.children().slice(0,settings.rotateBy).clone(true));
} else { // если мотаем к предыдущему элементу
/*
* вставляем перед первым элементом карусели
* клоны стольких элементов, сколько задано
* в параметре rotateBy (по умолчанию задан один элемент)
*/ $carousel.children(':first').before($carousel.children().slice(itemsTotal — settings.rotateBy, itemsTotal).clone(true));
/*
* сдвигаем карусель (<ul>) на ширину/высоту элемента,
* умноженную на количество элементов, заданных
* в параметре rotateBy (по умолчанию задан один элемент)
*/
if(settings.position=="v")
$carousel.css('top', -size * settings.rotateBy + 'px');
else $carousel.css('left', -size * settings.rotateBy + 'px');
}
/*
* расчитываем смещение
* текущее значение + ширина/высота одного элемента * количество проматываемых элементов * на направление перемещения (1 или -1)
*/
if(settings.position=="v")
Indent = parseInt($carousel.css('top')) + (size * settings.rotateBy * direction);
else
Indent = parseInt($carousel.css('left')) + (size * settings.rotateBy * direction);
if(settings.position=="v")
var animate_data={'top': Indent};
else
var animate_data={'left': Indent};
// запускаем анимацию
$carousel.animate(animate_data, {queue: false, duration: settings.speed, complete: function() {
// когда анимация закончена
if (!dir) { // если мы мотаем к следующему элементу (так по умолчанию)
// удаляем столько первых элементов, сколько задано в rotateBy
$carousel.children().slice(0, settings.rotateBy).remove();
// устанавливаем сдвиг в ноль
if(settings.position=="v")
$carousel.css('top', 0);
else $carousel.css('left', 0);
} else { // если мотаем к предыдущему элементу
// удаляем столько последних элементов, сколько задано в rotateBy
$carousel.children().slice(itemsTotal, itemsTotal + settings.rotateBy).remove();
}
if (settings.auto) { // если карусель должна проматываться автоматически
// запускаем вызов функции через интервал времени (auto)
intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);
}
running = false; // отмечаем, что анимация завершена
}});
}
return false; // возвращаем false для того, чтобы не было перехода по ссылке
}
// назначаем обработчик на событие click для кнопки "вперед"
$(settings.btnNext).click(function() {
return slide(false);
});
// назначаем обработчик на событие click для кнопки "Назад"
$(settings.btnPrev).click(function() {
return slide(true);
});
if (settings.auto) { // если карусель должна проматываться автоматически
// запускаем вызов функции через временной интервал
intID = window.setInterval(function() { slide(settings.dirAutoSlide); }, settings.auto);
}
});
};
})(jQuery);
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
.carousel {
margin: 0;
padding: 0;
list-style: none;
}
.carousel li {
float: left;
width: 60px;
height: 40px;
padding: 5px;
background: #E2E2E2;
font: 20px Calibry italic;
color:green;
border: gray 1px solid;
}
</style>
<body>
<div class="container">
<ul class="carousel">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
<br/>
<button id="prev2"><<Назад</button>
<div class="container2">
<ul class="carousel">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<button id="next2">Вперед>></button>
<div id="console"></div>
</body>
</html>
Кому интересно, как плагин применить совместно с wordpress, и настроить все для вывода галереи постов, пишите в комментариях. Постараюсь в скором времени описать в отдельной статье о том, как сделать jquery карусель в галереи постов wordpress .
На этом предлагаю вам скачать исходники плагина с примером, и откланиваюсь.
Скачать исходники плагина jquery.CarouselLifeExample.js ( Скачали: 147 чел. )
