Response title
This is preview!
- Screen name: 20pictures
20pictures's Profile
1 Posts
4 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 05-Mar-2012 06:15 AM
- Forum: Using jQuery Plugins
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>';
- }
- });
- «Prev
- Next »
Moderate user : 20pictures