jQuery Cycle Plugin: Multiple Pagers for different galleries on same page

Question

Hi guys,

I've got a single page which has multiple instances of a thumbnail 'cycle' gallery. Problem is though, the Paging system gets all messed up (it's adding all in one or something). It's probably something very simple for you guys, but this is what I've got:

$(function(){ 
$('div.gallery')
.before('<div class="imgSelect">')
.each(function() {
$('.imgWrap ul').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager:  '.imgSelect'
    });
  });
});

HTML:

<div class="imgWrap">
    <div class="gallery">
        <ul>
            <li><img src="images/travel1.jpg" alt="" /></li>
            <li><img src="images/travel2.jpg" alt="" /></li>
            <li><img src="images/travel3.jpg" alt="" /></li>
        </ul>
    </div>
   </div>

I'm basically trying to say, for each div called '.gallery', add a Pager div (.imgSelect) before it - but all these pagers should count only the images within that gallery.

Any help would be much appreciated, Cheers.

Answer 1

$(function(){
    $('div.gallery').each(function() {

        $(this).before('<div class="imgSelect" />');

        $('.imgWrap ul').cycle({
            fx: 'fade',
            speed: 'fast',
            timeout: 0,
            pager:  '.imgSelect'
            });
        });
    });

that will add div.imgSelect before each div.gallery

tho i'm not sure waht you mean with:

but all these pagers should count only the images within that gallery

oh ic, try this one:

$(function() {
    $('div.gallery').each(function(i) {
        $(this).before('<div class="imgSelect imgSelect' + i + '" />');
        $('.imgWrap ul').cycle({
            fx: 'fade',
            speed: 'fast',
            timeout: 0,
            pager:  '.imgSelect' + i;
            });
        });
    });

this will add a second class imgSelect0 through imgSelectN, where N is the total number of galleries minus one. the plugin internal counter keep adding the number if the assigned pagers are the same, so a work around is assigning distinct pager selector for each gallery.

Answer 2

this should work:

$(function() {
    $('.gallery ul').each(function(i) {
        $(this).before('<div class="imgSelect imgSelect'+i+'">').cycle({
            fx:     'fade',
            speed:  'fast',
            timeout: 2000,
            pager:  '.imgSelect' + i
            });
        });
    });

note: the timeout is in millisecond, setting it to zero will stop the cycle :D

hth.