CODEWITHSUNDEEP
jqueryjquery-pluginscycle
Julie
Julie

Reputation: 209

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

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

Upvotes: 1

Views: 4466

Answers (4)

Dougal
Dougal

Reputation: 1

Try setting pauseOnPagerHover to 0... When you set that to 1, it pauses when you hover over the pager, but also includes a function to play on mouseout. Therefore your onclick function is pausing an already-paused show, then when your cursor leaves the pager, the mouseout function makes it play again anyway.

I would guess 'toggle' might be working because maybe cycle uses toggle to play and pause in the pauseOnPagerHover function? You're then pausing on hover, playing on click, pausing again on mouseout.

Upvotes: 0

Michael
Michael

Reputation: 54

Using the pause command worked for me with the following code:

jQuery(document).ready(function($) {

    $('#highlights').cycle({ 
        fx:     'fade', 
        speed:  'slow', 
        timeout: 4000, 
        pager:  '#pager', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '#controls a:eq(' + idx + ')'; 
        } 
    });

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

});

Upvotes: 1

Blair McMillan
Blair McMillan

Reputation: 5349

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

Upvotes: 2

dotariel
dotariel

Reputation: 1594

Perhaps the .stop() method?

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

Upvotes: 0

Related Questions