EasySlider is an awesome quick and easy jQuery plugin to get things sliding with ease. I’ve used it on a clients site and found it very easy and versatile. There are plenty of options and customisations such as varying speed, pause length, repetition and so on.
There was one thing I noticed, however, that wasn’t customisable. A simple pause facility when someone hovers their cursor over the EasySlider object. I know from experience that putting something on a continuous loop is great to add a bit of movement to the page, but is no good if the user can’t stop it while they’re reading the content of the slide.
After a quick look online, it seemed as though no-one else has done it. So I put on the wellies and began wading through the code to add this functionality myself.
Adding the option
The first thing I wanted to do, was make it optional. Some times people may not want to use this functionality, so it’s best to configure it as a boolean parameter passed on instantiation of the plugin class. We’ll configure a default to false, so that the out-of-box behaviour is continuous sliding. Find the EasySlider plugin file, locate the defaults object, and modify it as I have done here.
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls',
allControls: false,
// added by George Edwards. When user hovers over control, doesn't animate
hoverPause: false
};
Now when people instantiate the plugin, the following code can be used to trigger the hoverPause functionality:
$('#slider').easySlider({
speed: 200,
auto: true,
continuous: true,
pause: 4000,
allControls: true,
// Trigger the pause on hover functionality
hoverPause: true
});
Creating the functionality
OK so now we have a configurable option, it’s time to build up the functionality. We need to detect when someone begins to hover over the object, and when their mouse stops hovering over the object. Fortunately, jQuery has the .hover() event that is fired when a DOM element is hovered over, along with a callback for when the element loses it’s hover state.
We can make use of this in this situation, but we’ll also need to keep track of the hover state when the plugin tries to begin the slide transition. So we just create an object property that stores a boolean value, and change it using the .hover() event. Take a look at the following code:
// We'll need this member variable to store a current hover state
var mouseOver = false;
// Handle mouse over of div
obj.hover(function(){
mouseOver = true;
}, function(){
mouseOver = false;
});
So here we’ve got our member variable that is set depending on the hover state. We bind the .hover() event to the obj object, as the EasySlider code assigns this from the $(this) DOM element, being the slider div. Now our code is handling the hover state correctly.
The next stage is to delay the slide animation/transition. For this, find the animate() function in the plugin and insert the following to the top of the functon code:
function animate(dir,clicked){
// If the mouse is over the object, bail animation.
if (options.hoverPause == true && mouseOver == true) {
return;
}
Pretty simple, or what? This simple if statement says – if we have enabled hoverPause functionality for this instance of the plugin (options.hoverPause == true), AND if the user is hovering over the slider element (mouseOver == true) then return out of the animate function without animating.
I hope this very simple improvement to this fantastic plugin can be of use to other developers looking to add pause/hover functionality.
Thanks. Where do the last two code snippets go? document.ready or easySlider.js? Thanks for helping me out!
Hi There. Into easySlider.js. Let me know if you have any further problems. I have noticed a couple of bugs on certain browsers, with this functionality not working as expected… let me know how it goes? I might have a dig back into the code and see if I can find out what’s wrong.
Thanks.
Thanks for the pointers, I found that resetting the timeout on mouseout seemed to fix the issue I had where the slider wouldn’t restart after hovering…
obj.hover(function(){
mouseOver = true;
}, function(){
mouseOver = false;
timeout = setTimeout(function(){
animate(“next”,false);
},options.pause);
});
You’re welcome! Awesome! Thanks for your contribution. I will have a play around with this.
Thanks again for your contribution
I was play around with mouseover for hover in div. It is worked! Also, Pete answered on javascript code (restart slider). It is worked, too. What about click on Play and Pause?
Thanks.
Thanks for the good work. I am having the same issue with mouseout not resuming the animation. The fix proposed by Pete doesn’t seem to work and breaks the whole easy slider code. …using webkit on mac os 10.6.
Thanks for putting together this script guys, most useful.
I did struggle implimenting Pete’s new code, i found that there was a small browser font / syntax problem on the animate line, so i used:
animate(“next”,false)
Thanks from Novosibirsk
I wanted to bind an event to this easySlider . For instance, if i click in ‘next’, change an outside background in any place in html body. This would b e cool.
First of all thanks for the time and info.
This seems to be working but I noticed that after the second banner slides in EasySlider starts cutting instead of sliding. I have tested in FF and Chrome.
In IE it scrolls 1 time then stops.
Any one else seeing this?
Any one have a working version I can review?
Thanks in advance!!