Bonjour
je n'arrive pas a changer l'ancienne photo qui à l'effet de rotation.
Actuellement ça fait l'effet 1 et 2 avec la photo cliqué.
pourtant dans la console ça m'affiche bien l'ancienne photo avant clic


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
36
37
38
39
40
41
42
43
44
45
46
47
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
  var back_photo = document.getElementById('zomclic') ;
 
 
  //var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
		var urlfoto = this.href;
		var backgroun = "url("+urlfoto+")";
		var srcimg = back_photo.getElementsByTagName('img'); // collection d’éléments IMG
		var linkimg = srcimg.item(0).src; // premier élément IMG, puis attribut src
big_photo.src = linkimg; 
setTimeout(() => {
big_photo.removeAttribute("class");	 
back_photo.removeAttribute("style");
big_photo.classList.add('effetfoto');
  }, 50);
 
console.log(linkimg); 
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      //big_photo.alt = this.title; // On change son titre
      //titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
 
 
setTimeout(() => {
	back_photo.removeAttribute("style");
    big_photo.removeAttribute("class");
	big_photo.classList.add('effetfoto2');
	back_photo.style.backgroundImage = backgroun;
  }, 150);
	 return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;
Code CSS : 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
.effetfoto {
 
	animation: efoto .25s;
}
@keyframes efoto {
  0% {
transform:rotate(0deg);
  }
  100% {
    opacity: 1;
transform:rotate(360deg) scale(0,0);
  }
}
 
.effetfoto2 {
	animation: efoto2 .25s;
}
@keyframes efoto2 {
  0% {
transform:scale(1,0);
	opacity:0;
  }
  100% {
transform:scale(1,1);
	opacity:1;
  }
}


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
<div id="galerie">
  <dl id="photo">
    <dt>&nbsp;</dt>
    <dd><figure id="zomclic" class="zoome centbvente" onmousemove="zoomf(event)" style="background-image: url(&quot;http://webcom/photos/9-astuce.jpg&quot;); background-position: 0.285714% 59%;"><img id="big_pict" name="princ_pict" src="http://webcom/photos/9-astuce.jpg" alt="photo de Soulager les piqures de moustique" class="effetfoto2"></figure>
	</dd>
  </dl>
 
 
       <div id="carousel">
   <div id="contentcara">	   
	   <ul id="galerie_mini">
 
 
 
    <li>
      <a href="./photos/9-astuce.jpg" title="9-astuce.jpg"><img src="./photos/9-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/10-astuce.jpg" title="10-astuce.jpg"><img src="./photos/10-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/11-astuce.jpg" title="11-astuce.jpg"><img src="./photos/11-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/13-astuce.jpg" title="13-astuce.jpg"><img src="./photos/13-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/14-astuce.jpg" title="14-astuce.jpg"><img src="./photos/14-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/15-astuce.jpg" title="15-astuce.jpg"><img src="./photos/15-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/16-astuce.jpg" title="16-astuce.jpg"><img src="./photos/16-astuce.jpg" alt="photo de Soulager les piqures de moustique"></a>   
	  </li>
 
 
    <li>
      <a href="./photos/18-astuce.jpg" title="18-astuce.jpg"><img src="./photos/18-astuce.jpg" alt="photo de Soulager les piqures de moustique">﷯</a>   
	  </li>
 
 
	</ul>
</div>	
	 <button id="prev">◀</button>
    <button id="next" style="display: none;">▶</button>
	</div>
</div>