Utilisation d'une image qui vient de remplacer une autre

Version imprimable

20/01/2020, 01h21
gaelfrancky

Utilisation d'une image qui vient de remplacer une autre

Salut, je suis débutant en js.
Après avoir créer un script qui permet de changer le src d'une image en jquery, je viens de rencontrer un problème lors de l'utilisation de l'image qui remplace l'image principale, le problème est qu'après avoir remplacer l'image principale par une nouvelle je dois survoler celle-ci afin de la zoomer mais au lieu que le zoom affiche la nouvelle img il m'affiche toujours l'img principale pouvez vous m'aider à faire en sorte que ça soit la nouvelle img qui s'affiche lors du zoom?
20/01/2020, 09h22
SpaceFrog

tu utilises quel script pour le zoom de l'image ? un plugin ? il faut à mon avis le réinitialiser ...
20/01/2020, 10h01
Invité

Bonjour,

on ne peut pas te répondre si tu ne montres pas ton code (HTML + JS).

J'utilise le plugin elevatezoom de jquery, comment dois je réinitialiser ?

l’image principale provenant d’une varable php

Code:

1
2
3
4
5
6
7
8
9
10
11
<img src= '<?php echo "administrateur/" .$photo; ?>'  id="photo_principale" /> 
// les images  qui doivent remplacer  l’imagde principale sur clique 
<?php $req = $bdd-> query ("SELECT * FROM couleur_article WHERE heure='$date' "); ?> <?php while($donnees = $req -> fetch()) { ?> <img src= '<?php echo "administrateur/" .$donnees['couleur']; ?>’  id="photochoix"  /> <?php } ?>
 <script type="text/javascript"> 
/* le script jouer qui permet de remplacer l’image principale en cliquant sur n’importe quel autre image provenant de la boucle while */
$(function() { $('#photochoix').on('click',function(){ $('#photo_principale').attr('src','$(this).attr('src')) }); 
});</script>
<script>
// le script qui permet de zoomer
$('#photo_principale').elevatezoom();
</script>

20/01/2020, 13h57
SpaceFrog

après avoir modifié le src de l'image, relance l'initialisation du zoom

Code:

$('#photo_principale').elevatezoom();

1- On a déjà corrigé ton code dans cette discussion.
Or là, tu nous montre l'ANCIEN code !! :weird:

2- Si tu veux utiliser elevateZoom, il faut LIRE LA DOCUMENTATION, ou, au moins, regarder les CODES des EXEMPLES -> "Gallery & Lightbox".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
 
<div id="gal1">
 
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>
 
  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>
 
  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>
 
  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>
 
</div>

Code:

1
2
3
4
5
6
7
8
9
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 
 
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});

Code:

1
2
3
4
5
/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}

3- Par contre, en voyant le code de l'exemple (!), je ne peux que te conseiller d'utiliser un AUTRE plugin :

id="img_01" sur chaque image ??? :nono: Un attribut id DOIT ETRE UNIQUE !
et .bind() est déprécié !

Bref, c'est clairement un "vieux" plugin, mal conçu.