Discussion :

[Matteo53]

Bonjour,
je reviens vers vous pour une autre question qui n'est pas évidente à expliquer..., j'ai trois images dans une page web, quand je clique sur une image elle doit apparaitre en grand dans une pop-In, je dois faire cela en jQuery.
J'ai réussi, mais je trouve que mon code est trop répétitif. Dans ma formation on a pas vu les les fonctions ou sous-programme. J'ai fait quelques recherche sur internet, j'ai quelques idée mais je n'arrive pas à mettre en pratique.

J'ai voulu créer une seul pop-In(div) et éviter d'en faire trois, puis quand je clique sur une des images j'attribue du css le src et show()

Mon code est le suivant :

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
 $("#imgOnglet1").click(function(){
    $("#popInImg img").css({"width" :"700px"});
    $("#popInImg").fadeIn(1000);
    $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});
    $("#popInImg img").attr("src", "img/onglet1.jpg");
    });
 
    $("#hide1").click(function(){
     $("#popInImg").hide();
    });
 
    $("#imgOnglet2").click(function(){
      $("#popInImg img").css({"width" :"700px"});
      $("#popInImg").fadeIn(1000);
      $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});
      $("#popInImg img").attr("src", "img/onglet2.jpg");
    });
 
 
 
 
   $("#imgOnglet3").click(function(){
      $("#popInImg img").css({"width" :"700px"});
      $("#popInImg").fadeIn(1000);
      $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});
      $("#popInImg img").attr("src", "img/onglet3.jpg");
    });
 
 
   $("#imgOnglet4").click(function(){
      $("#popInImg img").css({"width" :"700px"});
      $("#popInImg").fadeIn(1000);
      $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});
      $("#popInImg img").attr("src", "img/onglet4.jpg");
    });

Tout est répétitif sauf attr()

Est t'il possible de mettre des conditions selon l'image que je clique et appliquer le src correspondant :

Code :

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

1
2
3
4
5
6
7
8
9
10
$("#imgOnglet1, #imgOnglet2, #imgOnglet3,#imgOnglet4 ").click(function(){
    $("#popInImg img").css({"width" :"700px"});
    $("#popInImg").fadeIn(1000);
    $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});
 
    if("#popInImg img").click ......
       $("#popInImg img").attr("src", "img/onglet1.jpg");
    } else if ("#popInImg img").click ......{
      $("#popInImg img").attr("src", "img/onglet2.jpg");
    });

Je connais un peu les conditions pour comparer des variables mais les évènements un peu plus compliqué pour moi.
Je pourrais laisser le code que j'ai fait mais j'aimerais optimiser et apprendre un peu plus.
merci pour votre aide.

[NoSmoking]

Bonjour,
la documentation est très souvent un bon recours : jQuery.on().

Code :

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

1
2
3
$("liste des éléments").on("click", function(){
  console.log($(this).attr("la valeur que tu recherches"));
});

[Matteo53]

bonsoir,
merci pour votre réponse, oui j'essaie de regarder un peu les documentation mais parfois c'est un peu compliqué
Donc si je comprend bien votre réponse avec ce code j'applique aux trois éléments le css fadeIn et css (qui est en commun aux trois)

Code :

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

1
2
3
4
$("#imgOnglet1, #imgOnglet2, #imgOnglet3,#imgOnglet4 ").click(function(){
    $("#popInImg img").css({"width" :"700px"});
    $("#popInImg").fadeIn(1000);
    $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});

});

et pour changer l'image dans la pop-in selon si je clique sur l'image1 deux ou trois :

Code :

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

1
2
3
4
5
6
7
8
$("#imgOnglet1").on("click", function(){
  console.log($(this).attr("src", "img1.jpg"));
});
 
$("#imgOnglet2").on("click", function(){
  console.log($(this).attr("src", "img2.jpg"));
 
etc.

Merci pour votre aide et surtout votre patience.

[NoSmoking]

Pas tout à fait, il te faut « structurer » ton raisonnement

A partir du HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
<img src="images/image-1.png" class="pop-in-img" alt="">
<img src="images/image-2.png" class="pop-in-img" alt="">
<img src="images/image-3.png" class="pop-in-img" alt="">
<!-- etc -->
<!-- la pop-in masquée -->
<div id="pop-in-div">
  <img alt="">
</div>

... j'ai mis une classe commune sur les images pour alléger le sélecteur.

Ensuite, il te suffit de faire :

Code :

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

1
2
3
4
5
6
7
8
$(".pop-in-img").on("click", function(){
   // récupération, l'élément jQuery cliqué est $(this)
   const src = $(this).attr("src");
   // affectation src à l'image
   $("#pop-in-div img").attr("src", src);
   // affichage de la pop-in
   $("#pop-in-div").fadeIn(1000);
});

rien de plus si ce n'est adapter à ton besoin

[Matteo53]

Ah d’accord je n’avais pas de tout pensé à récupérer dans une variable l’ image cliquée puis la manipuler.. Je vais agrandir l’image dans la pop-in en lui affectant aussi le css.
Merci pour votre aide.
Bonne soirée