I am using the Jquery Cycle to create a slideshow with thumbnail pagers. The slideshow should pause when the thumbnail is hovered.
However, I have noticed that if the thumbs are clicked rapidly or if the mouse is moved over them rapidly, the timeout changes & even skips images! (FireFox / IE9).
I tried a fix recommended here to prevent bubbling but the Cycle would not load:
$.click(function(event){
event.preventDefault();
event.stopPropagation();
})
This had allowed the Cycle to load but did not solve the issue:
$('#nav li a').onmouseenter(function(event){
event.preventDefault();
event.stopPropagation();
})
These are my settings & any advice is appreciated:
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'scrollLeft',
delay: 2000,
sync: 1,
speed: 1500,
timeout: 3000,
manualTrump: true,
pager: '#nav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
slideExpr: 'img',
allowPagerClickBubble: false,
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="javascript:void(0);"><img src=\"' + slide.src + '" width="30" height="30"></a></li>';
}
});
