Discussion :

[Letsrock23]

Salut à tous !

Je débute en jQuery et j'ai un petit problème :

J'essaie de faire une sorte de diaporama d'images avec lequel on peut passer d'une image à une autre en cliquant sur une flèche (qui est aussi une image). Jusqu'ici tout va bien, la première fois que je clique sur la flèche, la deuxième image remplace bien la première. Mais après, plus rien ! J'ai beau cliquer sur la flèche, mais le code ne s’exécute plus et l'image reste la même.

Voici mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<img id="flechegauche" class="fleche" src="images/bd/fleche-gauche.png"/>
<div id="episode1">
    <img class="planche" id="planche10" src="images/bd/episode1/bd-episode1-1.PNG"/>
    <img class="planche" id="planche11" src="images/bd/episode1/bd-episode1-2.PNG" style="display: none"/>
    <img class="planche" id="planche12" src="images/bd/episode1/bd-episode1-3.PNG" style="display: none"/>
</div>
<img id="flechedroite" class="fleche" src="images/bd/fleche-droite.png"/>
<script src="jquery/jquery.js"></script>
<script src="jquery/bd.js"></script>

Et le jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
i = 0;
if(i==0){
    $('#flechegauche').css('display', 'none');
}
if(i==2){
    $('#flechedroite').css('display', 'none');
}
var actuel = '#planche1' + i;
var next = '#planche1' + (i+1);
var pre = '#planche1' + (i-1);
$('#flechedroite').on('click', function(){
    $(actuel).css('display', 'none');
    $(next).css('display', 'inline');
    $('#flechegauche').css('display', 'inline');
});
$('#flechegauche').on('click', function(){
    $(actuel).css('display', 'none');
    $(pre).css('display', 'inline');
    $('#flechedroite').css('display', 'block');
});

Donc je voudrais faire en sorte que le code s'exécute, peut importe l'image sur laquelle je suis, mais je ne vois pas comment faire.

Pourriez-vous m'aider ?

Merci à tous et bonne fête de fin d'année !

[NoSmoking]

Bonjour et bienvenue sur DVP.

Je n'ai pas de réponse mais je te mets le lien vers une discussion qui est bien le reflet de ce que tu cherches à gérer, Comment faire un site à lecture horizontale ? , le principe est le même, teste l'exemple que j'ai mis au post #11.

[micetf]

Bonjour,

Lors du click sur les flèches, tu ne modifies ni le i, ni actuel, ni next, ni prev.
La gestion de ces évènements donne donc toujours le même résultat :
Affichage de next = planche11 pour la flèche droite.

Fred

[micetf]

Bon ça ne marche que pour 3 images dans le diaporama mais pour le coup l'indice de l'image courante est actualisé lors des click.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
(function (window) {
    "use strict";
    var $ = window.jQuery,
        i = 0,
        gestionFleches = function () {
            $('#flechegauche, #flecheDroite').css('display', 'inline');
            if (i === 0) {
                $('#flechegauche').css('display', 'none');
            }
            if (i === 2) {
                $('#flechedroite').css('display', 'none');
            }
        };
 
    $('#flechedroite').on('click', function () {
        var actuel = '#planche1' + i,
            next = '#planche1' + (i + 1);
 
        $(actuel).css('display', 'none');
        $(next).css('display', 'inline');
        i += 1;
        gestionFleches();
    });
 
    $('#flechegauche').on('click', function () {
        var actuel = '#planche1' + i,
            pre = '#planche1' + (i - 1);
 
        $(actuel).css('display', 'none');
        $(pre).css('display', 'inline');
        i -= 1;
        gestionFleches();
    });
 
    gestionFleches();
}(this));

[Letsrock23]

Bonjour et merci pour vos réponses aussi rapides

NoSmoking, effectivement ce que tu as fait sur l'autre discussion est extrêmement intéressant merci beaucoup ! Je pense que je vais grandement m'en inspirer

Merci micetf, visiblement il ne manquait pas grand chose pour que ça marche !

J'aurais encore 2 questions rapidement avant de mettre résolu :
Que signifie "use strict" ?
Et je l'ai appris mais je n'ai aucune mémoire : que veulent dire les triples = ?

Merci encore

[NoSmoking]

- Le mode strict est une acceptation de plus de rigueur dans le code javascript utilisé.
- Le === est une équivalence stricte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
console.log( 0 =='0');   // true
console.log( 0 ==='0');  // false

[Letsrock23]

D'accord merci beaucoup et bonnes fêtes de fin d'année