Cycle jQuery Plugin часть 2

09/02/2010 - 22:59

В прошлой статье по Cycle plugin я написал теорию по использовании этого плагина, в этой статье мы перейдем к конкретным примерам использования.

ДЕМО

Начну с простейших примеров. Для начала надо подключить jQuery и Cycle.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>

Затем надо задать контейнеры для Cycle. Для первых двух примеров они задаются одинаково:

<div id="s1" class="pics">

<div class="text"><p>Это простой текстовый блок</p></div>

</div>

Как видно из примера слайдом может быть не только картинка, но и любой элемент. Теперь, чтобы применить плагин к контейнеру пишем:

$('#s1').cycle('fade');

Вот и все. Аргументом служит название эффекта, с которым должны сменяться слайды.

Вот их полный список:

blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

Из названия каждого думаю понятно что будет делать тот или иной эффект. Можно также написать через запятую несколько эффектов, тогда они эффекты будут чередоваться по очереди.

Хорошо, самый простой пример я разобрал. Теперь сделаю так, чтобы я мог управлять сменой слайдов. Начну с простого, а именно сделаю так, чтобы при нажатии на какой либо элемент слайд менялась на следующий или предыдущий. Для начала создаю эти самые элементы:

        <div id="s3" class="pics"> 
            <img src="images/1.jpg" width="200" height="200" /> 
            <img src="images/2.jpg" width="200" height="200" />
            <div class="text"><p>Это простой текстовый блок</p></div>
        </div>
        <a href="#" id="prev">Пред</a>
        <a href="#" id="next">След</a>

$('#s3').cycle({fx:"fade, scrollDown", next:"#next", prev:"#prev"});

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

Теперь сделаю кое-что посложнее, а именно пагинацию. Для этого надо передать поле в поле pager селектор блока, внутри которого будет "на лету" создаваться пагинатор. Пишу код:

 <div id="s4" class="pics"> 
<img src="images/1.jpg" width="200" height="200" /> 
 <img src="images/2.jpg" width="200" height="200" />
<div class="text"><p>Это простой текстовый блок</p></div>
</div>
<div id="pager01">
</div>

{codecitation class="brush:js; gutter: true; "}
$('#s4').cycle({fx:"fade, scrollDown", pager:"#pager01", pagerEvent :"mouseover"});

Я определил поле pagerEvent. Оно служит для того, чтобы задавать, на какое событие будет реагировать пагинатор. Я сделал так, чтобы он срабатывал, когда я навожу мышкой на ссылку. При этом cycle генерирует внутри pager01 следующий код:

<div id="pager01">
<a href="#" class="activeSlide">1</a>
<a href="#" class="">2</a>
<a href="#" class="">3</a>
</div>

Класс activeSlide присваивается соответственной активному в данный момент ссылке на слайд.

Теперь сделаю чтобы пагинатор состоял из маленьких версий оригинальных картинок. Для этого мы используем поле pagerAnchorBuilder. Он представляет из себя функцию вида function(index, DOMelement). Первый аргумент - индекс слайда, для которого генерируется анкор, второй - сам слайд. Функция должна возвращать либо код, который будет вставлен в элемент пагинатора, либо селектор элемента, при нажатии на который картинка будет сменяться.

В первом примере pager02 пуст. Функция pagerAnchorBuilder будет возвращает код элемента.

$('#s5').cycle({fx:"fade, scrollDown", pager:"#pager02",                            
pagerAnchorBuilder: function(idx, slide)
{
        return '<li><a href="#"><img width="30" height="40" src="'+slide.src+'"alt="" /></a></li>';
}});

Во втором примере наоборот pager03 не пуст. А в функции pagerAnchorBuilder я возвращаю селекторы элементов внутри pager03.

HTML:

<div id="pager03">
<li><a href="#"><img width="30" height="40" src="images/1.jpg"alt="" /></a></li>
<li><a href="#"><img width="30" height="40" src="images/2.jpg"alt="" /></a></li>
</div>

Скрипт:

$('#s6').cycle({fx:"fade, scrollDown", pager   :   "#pager03",                            
pagerAnchorBuilder: function(idx, slide) {
 return '#pager03 li:eq(' + idx + ') a';
}});

Подойду к проблеме теперь с другой стороны. Допустим я хочу сделать так, чтобы внешние управляющие элементы я сделали сам, такими какими хочу. Как же нам заставить cycle перейти на нужный мне слайд? Это очень просто. Надо просто вызвать применить cycle к элементу, подобно тому как это делалось для задания параметров, но в качестве аргумента передать номер нужного мне слайда (отсчет производиться с 0). Сразу приведу пример. Из него все станет понятно.

<div id="s7" class="pics"> 
<img src="images/1.jpg" width="200" height="200" /> 
<img src="images/2.jpg" width="200" height="200" />           
</div>
<div id="pager04">
<li><a href="#" onclick="$('#s7').cycle(0); return false;"><img width="30" height="40" src="images/1.jpg"alt="" /></a></li>
<li><a href="#" onclick="$('#s7').cycle(1); return false;"><img width="30" height="40" src="images/2.jpg"alt="" /></a></li>
</div>

В завершении осталось только показать как генерировать пагинатор налету. Тело пагинатора оставляем пустым. Затем пишем скрипт:

var bc = $('#pager05'); // Тут храним пагинатор
var $container = $('#s8').cycle({ 
fx:'scrollHorz', 
speed:   300, 
timeout: 0 
});         
$container.children().each(function(i)
{                  
// Обхожу все дочерние элементы контейнера и для каждого добавляю кнопку в пагинаторе    
$('<input type="button" value="'+(i+1)+'" />').appendTo(bc).click(function() {                         
    $container.cycle(i); 
    return false; 
}); 
});

Вот и все. Таким образом cycle дает инструменты для быстрого и простого создания галерей, презентаций, баннеров и прочих "крутилок". Все ограниченно только моей фантазией.

PS. Тут много примеров использования cycle.