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

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