Slider galerie javascript

Version imprimable

Bonjour,

Comment afficher les images d'une section de bloc-modale, afin que l'image sur laquelle on clique s'affiche?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!-- Section equipement -->
 
    <h2 class="titre-equipements">Les équipements</h2>
        <section id="equipement">
            <button type="button" data-index="1" class="btn-modale"></button>
            <button type="button" data-index="2" class="btn-modale"></button>
            <button type="button" data-index="3" class="btn-modale"></button>
            <button type="button" data-index="4" class="btn-modale"></button>
            <button type="button" data-index="5" class="btn-modale"></button>
            <button type="button" data-index="6" class="btn-modale"></button>
            <button type="button" data-index="7" class="btn-modale"></button>
            <button type="button" data-index="8" class="btn-modale"></button>
            <button type="button" data-index="9" class="btn-modale"></button>
 
        </section>
        <div class="bloc-modale">
         <div class="bloc-img">
           <img src="ressources/img9-equip.jpg" alt="matériel de sport"> 
             <button class="fermeture-modale">X</button>
            </div>
        </div>
 
      <script src="app.js"></script>
    </body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const btns = document.querySelectorAll('.btn-modale');
const modaleEquipement = document.querySelector('.bloc-modale');
const fermetureModale = document.querySelector('.fermeture-modale');
const imgIndex = document.querySelector('.bloc-modale img');
 
btns.forEach(btn => {
    document.querySelector('#show-modale')
    btn.addEventListener('click', (e) => {
 
        imgIndex.src = `ressources/img${e.target.getAttribute('data-index')}-equip.jpg`;
        modaleEquipement.classList.add('active-modale');
 
    });
 
});

13/02/2022, 09h42
NoSmoking

Bonjour,
je ne comprends pas tout :oops:

Citation:

Comment afficher les images d'une section de bloc-modale, afin que l'image sur laquelle on clique s'affiche?

si tu cliques dessus c'est qu'elle est affichée non !

Dans ton code je ne vois pas ces images, mais peut-être est-ce plutôt lié à une action sur tes boutons.
14/02/2022, 11h34
christian_bonito

Slider gallerie javascript

Bonjour,

L'action est liée aux boutons lorsque on click sur un bouton une image associée à son index doit s'afficher

Merci
14/02/2022, 13h39
NoSmoking

Dans ce cas ton code fonctionne, quel est le soucis rencontré ?
14/02/2022, 13h49
christian_bonito

slider gallerie javascript

Bonjour

L'action est liée aux boutons lorsque l'on clique dessus, une image associée à un index est censé s'afficher

Merci
14/02/2022, 15h57
NoSmoking

Je crois que l'on a bien compris ce que tu cherches à faire mais on ne peut pas deviner pourquoi ton code, qui fonctionne, ne te conviens pas !?!

J'émets donc une hypothèse, sans trop savoir, comme quoi les images voulues ne s'affichent pas malgré tout !
Dans ce cas vérifie l'existence de ces images, chemin d’accès, nom exact ...

Si non essaie d'être plus précis.

Les images s'affichent à présent mais ça ne se referment pas, je voudrais refermer le modal après affichage des images.
mon code:
Code:

1 2 3 4 5 6 7 fermetureModale.addEventListener('click', () => { modaleEquipementclassList.remove('active-modale'); }) modaleEquipement.addEventListener('click', () => { modaleEquipement.classList.remove('active.modale'); })

24/02/2022, 09h15
NoSmoking

Déjà rapidement :
modaleEquipement.classList