I'm using the jquery cycle plugin - it's fantastic, but I'm coming up
just short of how I want it to function.
The goal is to have a cycle that runs along with a pager. The pager
is custom and works on hover. Additionally, I want the cycle to pause
while you're hovering on a pager item, and resume once you've left.
This code appears to work correctly, but it occasionally says paused
or if you mouseover a second pager while the first is fading in it
stays paused on the first.
I'm a new convert to jquery - so if there is a better way to do any of
this let me know.
$(function() {
$('#caption a').mouseout(function() {
$('#slides').cycle('resume');
console.log('resumed');
});
$('#caption a').mouseover(function() {
$('#slides').cycle('pause');
console.log('paused')
});
$('#slides').cycle({
fx: 'fade',
timeout: 5000,
speed: 300,
pager: '#caption',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '#caption li:eq(' + idx + ') a';
}
});
});
(And as an aside, in some of the advanced samples, it uses a .before
or .after, eg http://malsup.com/jquery/cycle/pager2.html - I don't
quite get what's going on there.) Thanks!
