Question

I have two instances of the jQuery Cycle plugin on the same page. Used in isolation, they both work fine. Used together, I get an error which stops them working.

I don’t see how I can use an each() function, seeing as the options are different for the two instances.

$('#preview .cycle').before('<div class="pager">').cycle({ 
    fx:    'fade', 
    speed:  800,
    timeout: 5000,
    pager:  '.pager',
    pauseOnPagerHover: 1
    });

$('#switcher .cycle').before('<div class="pager">').cycle({ 
    fx:    'scrollHorz', 
    speed:  1500,
    timeout: 0,
    pager:  '.pager',
    pauseOnPagerHover: 1
    });

The Javascript console error message shows:

Uncaught TypeError: Cannot read property 'cycleW' of undefined

When used together, the first one works OK but the second throws the error. If used alone, the second works fine.

How can I get the two instances of jQuery Cycle to play nice?

Answer 1

have you tried something like the following?

var countit = 0;
$('.cycle').each(function() {
  var thenav = $('<div class="pager"></div>').insertBefore(this);
  countit++;
  if (countit == 1){
    $(this).cycle({
      fx:    'fade', 
      speed:  800,
      timeout: 5000,
      pager:  thenav,
      pauseOnPagerHover: 1
    });
  } else {
    $(this).cycle({
      fx: 'scrollHorz', 
      speed: 1500,
      timeout: 0,
      pager: thenav,
      pauseOnPagerHover: 1
    });
  }
});