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.