Discussion :

[gaelfrancky]

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?

[SpaceFrog]

tu utilises quel script pour le zoom de l'image ? un plugin ? il faut à mon avis le réinitialiser ...

[Invité]

Bonjour,

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

[gaelfrancky]

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

l’image principale provenant d’une varable php

Code html :

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

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>

[SpaceFrog]

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

Code :

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

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

[Invité]

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

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

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
<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 JavaScript :

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

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 css :

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

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 ??? Un attribut id DOIT ETRE UNIQUE !
• et .bind() est déprécié !

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