Stop / Play hover jquery reel

Question

Hi I am relatively new to using jquery reel. I would like to learn how to stop and play when you hover over jquery reel http://test.vostrel.cz/jquery.reel/docs/jquery.reel.html . I see that there is a stop, start and pause event, but I'm not sure how to activate it on hover.

Thanks!

<img id="image360" src='1.jpg' width="610" height="480" /> <script> $(function(){ //pause on hover (This does not work although hover is registered) $('#image360').hover(function() { ('#image360').pause(); }, function() { ('#image360').play(); }); //360 settings $('#image360').reel({ indicator: 5, cw: true, frame: 36, speed: -0.3, velocity: 2, brake: .2, images: 'cmopen/#.jpg' }); }); </script> 

Answer 1

I had the same problem and it was solved using two JS functions:

 function reel_pause() { $('#your_reel_id').trigger("stop"); //stoppe le défilement automatique. } function reel_play() { if ($('#your_reel_id').data("backwards")) { //teste le sens de défilement. $('#your_reel_id').trigger('play'); //relance le défilement à la même frame où on l'a arrêté. Attention, il relance dans son sens naturel (droite à gauche). $('#your_reel_id').data("backwards", true) //inverse le sens de défilement } else { $('#your_reel_id').trigger('play'); //si le sens où l'on a arrêté le défilement est le sens naturel, on n'a pas besoin d'inverser comme au dessus. } } 

This is important only if you do not want your reel to loop: The if if statement, if you do not speak French, is used to check the direction of the drum playing.

 $('#your_reel_id').data("backwards") $('#your_reel_id').data("backwards", true) 

The first returns true or false. False-> play from right to left. The second changes the natural direction → from left to right. I did this because when you play the drum, it plays in the natural direction. Even if you stopped him when you played the other way.

html looks like this:

 <div id="container" onmouseover="reel_pause()" onmouseout="reel_play()"> <img src="../Images/image.jpg" id="your_reel_id" width="900" height="500" /> </div> 

I have it wrapped in a div because I use links inside the drum. If you put the link in, it will be as if you pulled out a reel and it will start playing again. Hope this helps!

I don't mean a JS specialist, so if anyone has a better way to do this, post it!

Answer 2

You need to use the methods: pause (), play ().

 $(<your_element>).hover(function() { <your_reel>.pause(); },function() { <your_reel>.play(); });