Bonjour à tous !

Alors voilà, je suis en train de créer une galerie d'image. J'ai donc créé un système de lecture.

Je m'intéresse maintenant à la pause. Mais là, j'ai un problème.

Voici mon code :

//fonction lecture
        var lirediapo = 0;
        lirediapo = setInterval(function (){
            $('.galerie-image-nav-right').trigger('click');
        },2000);

//fonction stop
        $('galerie').mouseover(function () {
                clearInterval(lirediapo);
        });

La lecture marche bien, mais la pause non. La console ne m'indique pourtant aucune erreur.

Pourriez-vous m'aider ?

Merci !

Bonjour,

As-tu vérifié que l'instruction [clearInterval] est bien appellée au passage de la souris ?

Tu pourrais par exemple afficher ( à l'aide d'un [console.log()] ou d'un [alert()] par exemple ) la valeur de la variable [lirediapo], tu ferais d'une pierre, deux coups

-
Edité par Matmusia 19 juillet 2013 à 13:55:52

-
Edité par Newyn 19 juillet 2013 à 14:12:19

Bonjour !

Merci pour vos réponses !

J'ai donc essayé de mettre un alert !

//fonction stop
        $('.galerie').mouseover(function () {
                clearInterval(lirediapo);
                alert('test');
        });

Il manquait donc effectivement le . de la classe. Cependant, l'alert ne s'affiche pas lors du mouseover...

C'est un problème de ma fonction.

Je viens d'essayer avec un alert et stop lors du mouseover sur le body ça ne marche pas.

Est-ce que le code en question est bien dans une fonction appellée lorsque le DOM est complétement chargé ?

Ca expliquerait pourquoi au moment de l'execution du code, le ciblage ne se fasse pas correctement.

Au cas où :

- Lien vers la documention Jquery -

-
Edité par Matmusia 19 juillet 2013 à 15:00:30

hum... Je suis désolé j'ai trouvé la solution. C'était un id et non une classe... ( et heureusement parce que le code est assez long ).

Par contre, je bloque sur la fonction de reprise du diapo. J'essaye de faire un mouseout avec reprise de la fonction play mais ça ne marche pas.

Je pense que le bout de code important est uniquement celui-ci. Le reste de mon code est très très long.

J'ai donc mon code

//fonction lecture
        var lirediapo = 0;
        lirediapo = setInterval(function (){
            $('.galerie-image-nav-right').trigger('click');
        },2000);
 
//fonction stop
        $('#galerie').mouseover(function () {
                clearInterval(lirediapo);
        });

Je cherche maintenant un moyen de faire repartir le setInterval lorsque l'on enlève la souris.

Oups Désolé.

Oui :

//fonction lecture
        var lirediapo = 0;
        lirediapo = setInterval(function (){
            $('.galerie-image-nav-right').trigger('click');
        },2000);
 
//fonction stop
        $('#galerie').mouseenter(function () {
                clearInterval(lirediapo);
        });

//fonction reprise

        $('#galerie').mouseleave(function () {
                 lirediapo;
        });

Aucune erreur, et pourtant la diapo ne reprend pas lors du mouseleave...

Il faut que tu redémarres le minuteur dans ton mouseleave avec:

lirediapo = setInterval(function (){
            $('.galerie-image-nav-right').trigger('click');
        },2000);

Parfait !!!

Merci !

J'avais essayé mais comme j'utilisais mouseout ça me superposé les deux lecture et me lisait trois ou quatres images par seconde !

Je risque de recréer un autre topic si j'ai un autre problème, je suis en train de créer une galerie assez compliquée !

Merci beaucoup en tout cas ! Topic résolu !

-
Edité par Newyn 19 juillet 2013 à 16:00:44

Rien d'anormal à cela

lirediapo est une variable. La fonction setInterval renvoie un entier qui ne sert que d'identifiant.

Donc lorsque tu fais :

var lirediapo = 0;
    lirediapo = setInterval(function ()
    {
            $('.galerie-image-nav-right').trigger('click');
    },2000);

la variable lirediapo prend comme valeur l'entier qui lui est retourné par la fonction setInterval()

La ligne

lirediapo;

ne fait donc absolument rien ( de plus pour demander l'execution d'une fonction, son nom ne suffit pas, il faudrait le faire suivre de parenthèses pour que le moteur javascript comprène que tu souhaites qu'il execute la fonction en question ).

Donc, en procédant comme tu le fais, la seule option est de créer un nouvel interval lorsque la souris quitte la zone de l'élément #galerie, en faisant appel à la même instruction que pour le premier.

Tu pourrais donc envisager de mettre cette instruction dans une fonction qui serait appelé lors de l'initialisation de ton code, et lorsque la souris quitte l'élément #galerie.

Ok ! Je vais le faire !

Merci beaucoup !

Ayant arrêté le javascript il y a plus d'un an, je patauge beaucoup !

Mais ça va revenir !

//fonction lecture
        var lirediapo = 0;
        function play() {
            lirediapo = setInterval(function (){
                $('.galleria-image-nav-right').trigger('click');
            },2000);
        };

//lancement lecture
        play();

//fonction pause
        $('#galleria').mouseenter(function () {
                clearInterval(lirediapo);
        });

//fonction reprise
        $('#galleria').mouseleave(function () {
            play();
        });