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

JavaScript
1

hi
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

2

Do you have any html. A jsfiddle would be good - http://jsfiddle.net

3

no i dont have
i have 2 js files , how to include them in jsfiddle ?

but this is my htm

<div id="ctgslider" >	
<img src="slider/images/Slider-1.jpg">
<div class='Caption'>text text text text text text </div>
<img src="slider/images/Slider-2.jpg">
<div class='Caption'>text text text text text text </div>
<img src="slider/images/Slider-3.jpg">
<div class='Caption'>text text text text text text </div>
<img src="slider/images/Slider-4.jpg">
<div class='Caption'>text text text text text text text text  </div>
</div>

thanks

4

jsfiddle is split into four sections
html - top left
css - top right
javascript - bottom left
result - bottom right

Place the code in the correct section and hit run

Hit save and them post the link

5

because there are an images to see it work i attach all the script in one file .
please just run the index.html and the slider will work on your browser .

but i need the pause option wen mouse hover the images .

thank you

6

As far as I can tell, the slider doesn’t 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:

<script>
  sliderPaused = false;
  $("#ctgslider").hover(function(){
    sliderPaused = true;
  }, function(){
    sliderPaused = false;
  });
</script>

Then make sure you are using the non-minified version of the script and add this line to the top of the NextPicture function:

if(sliderPaused) return;

That should work for you.

demo

7

thank you very much , but sorry to say that i dont find the NextPicture function (i dont know this ) .
and i dont know what is this mean "non-minified version of the script " .

please can you explane more exactly were you puted this code : " if(sliderPaused) return; "?

or can you giv me the final editing files ?
please
thank you

8

Sure.
I’ve attached the modified files to this post.

9

thank you very much
you realy helped me too .

thanks

10

but please there is one problem now i see it :
wen pause the slide the next arrow (on the right side) dos not work wen click on it .
this mean cant move to the next image wen pause .

can this be fixed please ?

see your demo .

thanks

11

Oops, yeah, right you are.

Clicking the next button is calling the function NextPicture() too, so we have to differentiate between hovering on the slider and clicking the slider.

In the file ctgslider.js change line 165 / 166 from this:

function NextPicture(){
	if(sliderPaused) return;

to this:

function NextPicture(e){
	if(sliderPaused && !e) return;
12

thannk you very much for your help .
realy you made it easy to me .

thanks