Response title
This is preview!
I am using the Jquery Cycle to create a slideshow with thumbnail pagers. The slideshow should pause when the thumbnail is hovered. I had wanted to include a Google Analytics event on the thumbnail & slide should it be clicked so each is wrapped in an anchor.
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! I removed the Google Analytics event so the setup is default & there should be only the call from the pager to Cycle but this did not correct the issue (FireFox / IE9).
I tried a recommended fix 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').hover(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: 250,
- timeout: 3000,
- pager: '#nav',
- pagerEvent: 'mouseover',
- pauseOnPagerHover: true,
- slideExpr: 'img',
- allowPagerClickBubble: false,
- pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src=\"images/thumbs/' + basename(slide.src) + '" width="70" height="70"></a></li>';
- }
- });
1