Discussion :

[sg2707]

Bonjour,
J'ai créé un mur de 12 photos sur ma page d'accueil.
En cliquant sur une des photos, on arrive sur une 2ème page qui affiche un carrousel ou défilé d'images.
Ce carrousel reprend en plus grand les mêmes 12 photos, avec la boucle

Code javascript :

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

 for(let i=1;i<=nbr;i++)

Je voudrais que quand on clique sur une des 12 photos de la 1ère page, on arrive sur la bonne photo dans le carrousel, et pas sur la 1ère photo du défilé.
Quelqu'un peut-il me donner une piste?
Merci.

[domi65]

Bonjour.

Tu ne nous donne pas beaucoup de code !
je vais essayer de te répondre avec ce qu'on a.

Mettons que tes images soient dans un container dont l'id est carousel.

Tu peux mettre en place un gestionnaire comme ceci :

Code :

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

1
2
3
4
5
6
let imgs = document.querySelectorAll('#carousel img');
for(let i=0, maxi = imgs.length; i < maxi ; i++) {
  imgs [i].onclick = function(i) {
    // fonction qui envoie en argument le positionnement de l'image pour en faire ce que tu veux
  }
}

[Archimède]

Tu définis une variable pos (numéro de l'image cliquée) sur ta première page. Dans la fonction de domi65, tu fais pos=i+1;
Ensuite avec localStorage; tu stockes pos pour pouvoir l'utiliser sur ta page 2. Et dans ta boucle :

Code :

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

for (let i=pos; i<=nbr; i++){ .... if (i==nbr) pos=1; //Si ça tourne en boucle...

C'est une idée...

[sg2707]

Bonjour,
Merci pour vos réponses très utiles, que j'ai essayé d'appliquer tant bien que mal.
Je pense que la solution que j'ai trouvée n'est pas très économique (mais je soigne en suivant le cours d'introduction sur ce site).
Elle permet, quand je clique sur une image sur la 1ère page, d'arriver à la même image du carrousel sur la 2ème page.
Mais je ne trouve pas comment revenir à la photo n°1 quand le nombre de photos total (12)est atteint.
Je joins des extraits des deux pages html et mon code javascript.

1ère page (raccourcie):

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 <div id="murDePhotos">
<a href="carrouselMur2.html"><ul id="containerMur">
  <li id="containerPhoto1"><img id="photoMur1" src="mur/mur1.jpg" onclick="lienDiapo(1)" onmouseenter="expandImage(1)"onmouseleave="nonExpandImage(1)"
    style="object-position: 0 -160px;"></li>
 
  <li id="containerPhoto2"><img id="photoMur2"src="mur/mur2.jpg" onclick="lienDiapo(2)"onmouseenter="expandImage(2)"onmouseleave="nonExpandImage(2)" 
    style="object-position: 0px -300px;"></li>
  <li id="containerPhoto3"><img id="photoMur3"src="mur/mur3.jpg" onclick="lienDiapo(3)"onmouseenter="expandImage(3)"onmouseleave="nonExpandImage(3)" 
    style="object-position: 0 -370px;"></li>
  <li id="containerPhoto4"><img id="photoMur4"src="mur/mur4.jpg"onclick="lienDiapo(4)"onmouseenter="expandImage(4)"onmouseleave="nonExpandImage(4)"  
    style="object-position: 0 -285px;"></li>
 
 
  <li id="containerPhoto5"><img id="photoMur5" src="mur/mur5.jpg"onclick="lienDiapo(5)"onmouseenter="expandImage(5)"onmouseleave="nonExpandImage(5)" 
    style="object-position: 0 -220px;"></li>
    <li id="containerPhoto6"><img id="photoMur6" src="mur/mur6.jpg"onclick="lienDiapo(6)"onmouseenter="expandImage(6)"onmouseleave="nonExpandImage(6)"
      style="object-position: 0 -210px;"></li>
    <li id="containerPhoto7"><img id="photoMur7" src="mur/mur7.jpg"onclick="lienDiapo(7)"onmouseenter="expandImage(7)"onmouseleave="nonExpandImage(7)"
      style="object-position: 0 -420px;"></li>
    <li id="containerPhoto8"><img id="photoMur8" src="mur/mur8.jpg"onclick="lienDiapo(8)"onmouseenter="expandImage(8)"onmouseleave="nonExpandImage(8)" 
      style="object-position: 0 -220px;"></li>
 
    <li id="containerPhoto9"><img id="photoMur9" src="mur/mur9.jpg"onclick="lienDiapo(9)"onmouseenter="expandImage(9)"onmouseleave="nonExpandImage(9)" 
      style="object-position: 0px -170px;"></li>
      <li id="containerPhoto10"><img id="photoMur10" src="mur/mur10.jpg"onclick="lienDiapo(10)"onmouseenter="expandImage(10)"onmouseleave="nonExpandImage(10)"
        style="object-position: 0px -250px;"></li>
      <li id="containerPhoto11"><img id="photoMur11" src="mur/mur11.jpg"onclick="lienDiapo(11)"onmouseenter="expandImage(11)"onmouseleave="nonExpandImage(11)"
        style="object-position: 0 -100px;"></li>
      <li id="containerPhoto12"><img id="photoMur12" src="mur/mur12.jpg"onclick="lienDiapo(12)"onmouseenter="expandImage(12)"onmouseleave="nonExpandImage(12)" 
        style="object-position: 0 -310px;"></li>
  </ul></a>
<script>
  function lienDiapo(nbrPhoto)  {
    let pos=nbrPhoto;
    localStorage.setItem("pos", pos);
  }
</script>
</div>

2ème page html en entier:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html"charset="UTF-8">
    <link rel="stylesheet" href="responsive.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="wsite-section-wrap.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="topnav.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="topnavResponsive.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="carrousel.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="boutonsRéseauxSociaux.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="mur.css" type="text/css" media="screen"/>
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 
 
 
    <meta name="viewport" content="width=device-width",initial-scale=0.86,maximum-scale=5.0, minimum-scale=0.86>
    <script src="javascript.js"></script>
    <script src="mur.js"></script>
    <title> siteElevage </title>
 
</head>
<body>
 
    <!--CARROUSEL-->
 
<div id="carrouselMur">
    <div id="containerSlidesMur"></div>
    <a class="bouton" id="g">❮</a>
    <a class="bouton" id="d">❯</a>
   </div>
    <script type="text/javascript">
        
        document.body.onload=function(){
          nbr=12;
          p=0;
          
          containerSlidesMur=document.getElementById("containerSlidesMur");
          g=document.getElementById("g");
          d=document.getElementById("d");
          containerSlidesMur.style.width=(410*nbr)+"px";
          afficherMasquer();
 
          let position=localStorage.getItem("pos");
 
          for(let i=position;i<=nbr;i++)
          {
            if (i==nbr) {
              position=1;
            }
            let div=document.createElement("div");
            div.className="photoMur";
            div.style.backgroundImage="url('mur/mur"+i+".jpg')";
            containerSlidesMur.appendChild(div);
            
            
          }}
          function translate(){
            containerSlidesMur.style.transform="translate("+(-410*p)+"px)";
          }
        
        g.onclick=function(){
          if((p<=nbr) && (p>0))
            p--;
            translate();
            containerSlidesMur.style.transition="all 0.5s ease";
            afficherMasquer();
        }
        d.onclick=function(){
          if(p<=nbr-2)
            p++;
            translate();
            containerSlidesMur.style.transition="all 0.5s ease";
            afficherMasquer();
        }
        function afficherMasquer(){
          if(p==(-1+nbr))
          {d.style.visibility="hidden";
          g.style.visibility="visible";
           }
      
        if(p==0)
          {d.style.visibility="visible";
           g.style.visibility="hidden";}
      
        if ((p<nbr-1) && (p>0)){
          d.style.visibility="visible";
          g.style.visibility="visible";
        }
        }
       </script>
      </div>
 
</body>

[sg2707]

J'ai trouvé moi-même.

[ProgElecT]

J'ai trouvé moi-même.

Cela donne quel code ?

[Archimède]

En effet..., déjà localStorage.setItem() reçoit une string et non un entier...
Donc, il faudrait faire :

Code :

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

localStorage.setItem('pos', pos.toString() );

et pour lire dans le second fichier :

Code :

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

1
2
let positionString=localStorage.getItem("pos"),
    position = parseInt(positionString);

Après, je n'ai pas eu le temps de tester... Mais manipuler une valeur de type string sans l'avoir convertie en un entier dans la boucle devrait poser problème ! ?

Rq: Sinon, je viens de regarder et j'ai une solution qui fonctionne...