Multiple jQuery Cycle pager navigation

Question

I'm in the process of implementing the jQuery cycle plugin to create 20 image galleries each with their own previous, next, and pager navigation controls without having to create and reference 3 new id names per slideshow and avoid having to create a separate function for each slideshow. In the example below I attempted to give each slideshow a unique pager but without limited success. I'm hoping that there is a more intuitive way to write this using the .each() function. Thanks in advance to anyone that can help.

HTML: (I've only included two slideshows in this example)

<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'
});

score 0 · Accepted Answer · edited Dec 20 '12 at 15:19

EDIT: Didn't read the question properly. Here you go

$('.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>';
    },
});
});

Something like this?

For the prev and next, i think it would be more efficient to manually bind the prev and next buttons like so.

$('.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');
});

Basically have a single click handler for all next/prev buttons and access the cycle plugin manually using .cycle('prev') and .cycle('next')

You can even make shrink it down to just one click handler if you want

$('.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');
  }
});

In theory this is exactly what I need. Unfortunately there must be something slightly off because none of the prev/next buttons are working and the pagers are not visible. Also, not getting any errors which makes it hard to debug. Is it possible that the "work_slideshow" class would be interfering with the class hierarchy? — negrelja, Dec 19 '12 at 19:46
I was unable to get the one click handler example to work properly. The forward and next button are both getting assigned the next functionality based on the example provided. — negrelja, Dec 20 '12 at 15:19

Multiple jQuery Cycle pager navigation

1 Answers1