Jquery Cycle Plugin - How to pause slideshow when a pager link is clicked

Question

Hi, I am using the Jquery cycle plugin to create an announcements slideshow. I would like to pause the slideshow when the user clicks on one of the pager links. I have tried using the pagerClick function and attaching the pause function to the onclick event for the pager links, but neither worked. Can you help?

$('#highlights')
.after('<div id="pager">')
.cycle({
    fx: 'fade',
    timeout: 4000,
    pager: '#pager',
    pagerEvent:'mouseover',
    activePagerClass: 'active',
    pause: 1,
    pauseOnPagerHover: 1,
    pagerClick:function() {$('#highlights').cycle('pause')}
});

Answer 1

Perhaps the .stop() method?

http://api.jquery.com/stop/

Answer 2

From the pause/resume demo you should be able to do:

$('#pager a').click(function() { 
    $('#highlights').cycle('pause'); 
});

That should bind to the links in your pager.

$('#highlights')
.after('<div id="pager">')
.cycle({
    fx: 'fade',
    timeout: 4000,
    pager: '#pager',
    pagerEvent:'mouseover',
    activePagerClass: 'active',
    pause: 1,
    pauseOnPagerHover: 1
});

$('#pager a').click(function() { 
    $('#highlights').cycle('toggle'); 
});