diff --git a/Demos/demo.html b/Demos/demo.html index 9f32393..9eee02e 100644 --- a/Demos/demo.html +++ b/Demos/demo.html @@ -14,7 +14,7 @@ autoplay: true, transitionDuration:500, slideInterval:3000, - hover:false + hover:true }); }); diff --git a/Source/rotater.js b/Source/rotater.js index 91d84af..46a2ad1 100644 --- a/Source/rotater.js +++ b/Source/rotater.js @@ -17,6 +17,8 @@ MGFX.Rotater = new Class({ onRotate: $empty, onShowSlide: $empty, onStop: $empty, + onPause: $empty, + onResume: $empty }, initialize: function(slides,options){ @@ -26,7 +28,7 @@ MGFX.Rotater = new Class({ this.showSlide(this.options.startIndex); if(this.slides.length < 2) this.options.autoplay = false; if(this.options.autoplay) this.autoplay(); - if(this.options.hover) this.slides.addEvent('mouseenter',function() { this.stop(); }.bind(this)); + if(this.options.hover) this.setupHover(); return this; }, @@ -37,6 +39,38 @@ MGFX.Rotater = new Class({ }); }.protect(), + setupHover: function() { + var _timeLastRotate = new Date(), + _timeLastPause, + _timeTillRotate = this.options.slideInterval, + _resumeDelay; + + this.addEvent('onRotate', function() { + if(this.slideshowInt) { + _timeLastRotate = new Date(); + _timeTillRotate = this.options.slideInterval; + } + }); + this.slides.addEvent('mouseenter',function() { + this.stop(); + _timeLastPause = new Date(); + $clear(_resumeDelay); + this.fireEvent('onPause'); + }.bind(this)); + + this.slides.addEvent('mouseleave', function() { + console.log(_timeLastPause - _timeLastRotate); + var timePassed = (_timeLastPause - _timeLastRotate); + _timeLastRotate = new Date() - timePassed; + _resumeDelay = (function() { + this.autoplay(); + this.rotate(); + this.fireEvent('onResume'); + }).delay(_timeTillRotate - timePassed, this); + + }.bind(this)); + }.protect(), + showSlide: function(slideIndex){ if(slideIndex == this.currentSlide) return this; var action = {}; @@ -70,8 +104,8 @@ MGFX.Rotater = new Class({ }, rotate: function(){ - current = this.currentSlide; - next = (current+1 >= this.slides.length) ? 0 : current+1; + var current = this.currentSlide; + var next = (current+1 >= this.slides.length) ? 0 : current+1; this.showSlide(next); this.fireEvent('onRotate', next); return this;