Discussion :

[christian_bonito]

Bonjour,

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

Code html :

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
 <!-- 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 JavaScript :

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

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');
 
    });
 
});

[NoSmoking]

Bonjour,
je ne comprends pas tout

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.

[christian_bonito]

Bonjour,

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

Merci

[NoSmoking]

Dans ce cas ton code fonctionne, quel est le soucis rencontré ?

[christian_bonito]

Bonjour

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

Merci

[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.

[christian_bonito]

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 :

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

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