Another Cycle pause/resume not working issue (detailed homework done)

Another Cycle pause/resume not working issue (detailed homework done)

I've successfully implemented Cycle along with some additional code which uses the youtube JS API to communicate video pause and play events.

I have disabled pause on hover and created my own mouse events for pausing and starting the slideshow.

I have gone as far as to add a console log line to the pause event in jquery.all.js to trace the pause event as I felt passing the command to Cycle wasn't making it to the slider.

  1. case 'pause':
  2.             cont.cyclePause = 1;
  3.             triggerPause(cont);
  4.             console.log("$$$ cycle is paused $$$"); //added this to trace
  5.             return false;


My mouse events look like this...

  1. jQuery('#slider').mouseenter(function(){
  2.     jQuery('#slider').cycle("pause");
  3.     sliderstate = "paused";
  4.     console.log("MOUSE ENTER EVENT TRIGGERED SLIDER STATE : " + sliderstate);
  5. });
  6. jQuery('#slider').mouseleave(function(){
  7.       // **IF SLIDER IS PAUSED  AND(BECAUSE) VIDEO IS PLAYING DON'T RESUME SLIDER
  8.       if (sliderstate == "paused" && playerstate != 1){
  9.             console.log("DO NOTHING!");
  10.       }else{
  11.             // **RESUME SLIDER
  12.             jQuery('#slider').cycle("resume");
  13.             sliderstate = "playing";       
  14.       };
  15.       console.log("MOUSE LEAVE EVENT TRIGGERED SLIDER STATE : " + sliderstate);
  16. });

Ignoring the playerstate contitional for a moment.. the trace in my jquery.cycle.all.js returns

$$$ cycle is paused $$$


to the console window which to me, means the command jQuery('#slider').cycle("resume"); is being triggered in the base code... unfortunately, the slider continues to play once the timeout (time before next slide appears) is reached even if keep my mouse over the slider.

I've also tried sending other control commands with no effect (toggle, stop, prev, next)

Once I get this issue figured out it's only a short step to get my video buffering/playing/paused conditionals working to control cycle's pause/resume.

here is my slider init code...

  1. $slider = {
  2.     context: false,
  3.     tabs: false,
  4.     timeout: 6000,     
  5.     slideSpeed: 1000,
  6.     fx: 'scrollDown',
  7.                      
  8.    
  9.     init: function() {
  10.         // set the context to help speed up selectors/improve performance
  11.         this.context = jQuery('#slider');
  12.        
  13.         // set tabs to current hard coded navigation items
  14.         this.tabs = jQuery('ul.slides-nav li', this.context);
  15.         this.headers = jQuery('ul.slider-headers li', this.context);
  16.        
  17.         // remove hard coded navigation items from DOM
  18.         // because they aren't hooked up to jQuery cycle
  19.         this.tabs.remove();
  20.        
  21.         // prepare slider and jQuery cycle tabs
  22.         this.prepareSlideshow();
  23.     },
  24.    
  25.     prepareSlideshow: function() {
  26.         // initialise the jquery cycle plugin -
  27.         // for information on the options set below go to:
  28.         // http://malsup.com/jquery/cycle/options.html
  29.         jQuery('div.slides > ul', $slider.context).cycle({
  30.             fx: $slider.fx,
  31.             timeout: $slider.timeout,
  32.             speed: $slider.slideSpeed,
  33.             fastOnEvent: $slider.tabSpeed,
  34.             pager: jQuery('ul.slides-nav', $slider.context),
  35.             pagerAnchorBuilder: $slider.prepareTabs,
  36.             before: $slider.activateTab,
  37.             //pauseOnPagerHover: true,
  38.             //pause: true
  39.         });           
  40.     },
  41.     prepareTabs: function(i, slide) {
  42.         // return markup from hardcoded tabs for use as jQuery cycle tabs
  43.         // (attaches necessary jQuery cycle events to tabs)
  44.         return $slider.tabs.eq(i);
  45.     },
  46.     activateTab: function(currentSlide, nextSlide) {
  47.         // get the active tab
  48.         var activeTab = jQuery('a[href="#' + nextSlide.id + '"]', $slider.context);
  49.        
  50.         // if there is an active tab
  51.         if(activeTab.length) {
  52.             // remove active styling from all other tabs
  53.             $slider.tabs.removeClass('on');
  54.             // add active styling to active button
  55.             activeTab.parent().addClass('on');
  56.         }           
  57.     }           
  58. };
  59. jQuery(function() {
  60.     // add a 'js' class to the body
  61.     jQuery('body').addClass('js');   
  62.     // initialise the slider when the DOM is ready
  63.     $slider.init();
  64. });


Thanks!