Множественная навигация по пейджеру jQuery Cycle

Я нахожусь в процессе реализации плагина цикла jQuery для создания 20 галерей изображений, каждая из которых имеет свои собственные элементы управления предыдущей, следующей и пейджерной навигацией, без необходимости создавать и ссылаться на 3 новых имени идентификатора для каждого слайд-шоу и избегать необходимости создавать отдельную функцию для каждое слайд-шоу. В приведенном ниже примере я попытался присвоить каждому слайд-шоу уникальный пейджер, но без особого успеха. Я надеюсь, что есть более интуитивный способ написать это с помощью функции .each(). Заранее спасибо всем, кто может помочь.

HTML: (в этот пример я включил только два слайд-шоу)

<div class="slideshow_container">
    <div class="work_slideshow">
        <div class="slideshow" id="s1">
            <img class="slide" src="images/port/design_unique_1.jpg" />
            <img class="slide" src="images/port/design_unique_2.jpg" />
            <img class="slide" src="images/port/design_unique_3.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager1"></div>
    </div>

    <div class="work_slideshow">
        <div class="slideshow" id="s2">
            <img class="slide" src="images/port/design_equality_1.jpg" />
            <img class="slide" src="images/port/design_equality_2.jpg" />
        </div>
        <div class="controls">
            <img src="images/arrow_left.png" class="prev"/>
            <img src="images/arrow_right.png" class="next"/>
        </div>
        <div class="pager" id="pager2"></div>
    </div>
</div>

jQuery:

$('.slideshow').cycle({   
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    prev:'.prev',
    next:'.next',
    timeout:0,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
$('#s1').cycle({
pager:'#pager1'
});
$('#s2').cycle({
pager:'#pager2'
});

jquery jquery-selectors jquery-plugins jquery-cycle
person negrelja    schedule 19.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

РЕДАКТИРОВАТЬ: Не прочитал вопрос должным образом. Ну вот

$('.slideshow').each(function () {
var pager = $(this).closest('.work_slideshow').find('.pager');
$(this).cycle({
    fx: 'fade',
    easing: 'easeOutExpo',
    speed:2000,
    timeout:0,
    pager: pager,
    pagerAnchorBuilder: function(idx, el) {
        return '<a href="#" title="Slides"></a>';
    },
});
});

Что-то вроде этого?

Для предыдущей и следующей, я думаю, было бы более эффективно вручную привязать кнопки «предыдущая» и «следующая» вот так.

$('.slideshow_container').on('click','.controls .prev',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('prev');
});

$('.slideshow_container').on('click','.controls .next',function (e) {
    e.preventDefault();
    $(this).closest('.work_slideshow').find('.slideshow').cycle('next');
});

По сути, у вас есть обработчик одного клика для всех кнопок «следующий/предыдущий» и доступ к плагину цикла вручную с помощью .cycle('prev') и .cycle('next')

Вы даже можете уменьшить его до обработчика одного клика, если хотите.

$('.slideshow_container').on('click','.controls a',function (e) {
  e.preventDefault();
  if ($(this).hasClass('next') {
    $(this).closest('.slideshow').cycle('next');
  } else {
    $(this).closest('.slideshow').cycle('prev');
  }
});
person Dogoku    schedule 19.12.2012
comment
Теоретически это именно то, что мне нужно. К сожалению, должно быть что-то немного не так, потому что ни одна из кнопок «предыдущая/следующая» не работает, а пейджеры не видны. Кроме того, отсутствие ошибок, что затрудняет отладку. Возможно ли, что класс work_slideshow будет мешать иерархии классов? - person negrelja; 19.12.2012
comment
Мне не удалось заставить пример обработчика одного клика работать должным образом. Кнопки «Вперед» и «Далее» получают следующую функциональность на основе приведенного примера. - person negrelja; 20.12.2012