how to pause the slide images on mouse hover on this code? - mouseover

Question

i searched about my problem and did not find it .
i have this cod for slide show and need to add pause wen mouse hover the images .
i tryed hours to do it but cant .
this is the code :
$().ready(function() {
$('#ctgslider').ctgslider({
'timelength':1000,
'showbuttons': 'Y',
'minibuttons':'Y',
'minibuttonopacity': .45,
'centerbuttons': 'Y',
'alignrightnextbutton' : 'Y',
'btnoffset':5 ,
'effects':'fade',
'captioneffects':'explode',
'captionclass':'.Caption',
'usenumbers':'Y',
'minibtnimagesrc':'slider/images/circle.png',
'usecaptions':'Y'
});
});
$(document).ready(function(){
$('#ctgslider').mouseenter(function(){
$('#ctgslider').ctgslider({'timelength':'900000'});
});
$('#ctgslider').mouseleave(function(){
$('#ctgslider').ctgslider({'timelength':'1000'});
});
});
a want to play with this part of the code :
$(document).ready(function(){
$('#ctgslider').mouseenter(function(){
$('#ctgslider').ctgslider({'timelength':'900000'});
});
$('#ctgslider').mouseleave(function(){
$('#ctgslider').ctgslider({'timelength':'1000'});
});
can anyone help me to improve the code to get the pause on mouse over the div "ctgslider" ?
thanks

Answer 1

The slider doesn't seem to expose any kind of events you can hook into, which makes life a little difficult.
A quick fix would be to add this code to the bottom of your HTML file:
sliderPaused = false;
$("#ctgslider").hover(function(){
sliderPaused = true;
}, function(){
sliderPaused = false;
});
Then make sure you are using the non-minified version of the script and alter the NextPicture function like so:
function NextPicture(e){
if(sliderPaused && !e) return;
Passing the function a reference to the event object, means that you can differentiate between hovering on the slider and clicking the next slide button.
Here's a demo