Bonjour à tous !

Je suis en train d'améliorer mon site de e-commerce et pour ce faire j'ai installé un plug-in Magnifier en JQuery et le plug-in marche très bien seulement je recontre des difficultés à obtenir le zoom lors du changement de vignette. Vous pouvez retrouver la page test à cette adresse : http://www.xikiem.com/Catalogue/test.php?id=84

Le souci c'est que c'est toujours la 1ère vignette qui reste en zoom. J'ai pourtant modifié l'attribut href lorsqu'on clique sur une vignette (cela marche bien pour le lien du bouton rose "retour"). Cela quelqu'un avait une idée, cela m'aiderait beaeucoup. Je vous remercie. Dans l'attente de vos réponses, je vous souhaite une bonne soirée. Voici le code :

<script type="text/javascript">
$(document).ready(function(){
	$(".thumbs a").click(function(){
	  var largePath = $(this).attr("href"); //définition de la variable lien
	  $("#largeImg").attr({ src: largePath }); //agrandissement de la vignette
	  $("#lien").attr("href", largePath); // ne marche pas !!! tentative de modif du lien pour le zoom
	  $("#ok").attr("href", largePath); //modification du lien du bouton rose retour : ça marche !
	  return false; // désactivation des liens sur les petites vignettes
	});
});
</script>


<td style="background-image:url(../Pics/bg_article.png); background-position:center; background-repeat:no-repeat;" width="432" align="center"><div style="position:relative">
              <a id="lien" href="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_1.jpg"><img id="largeImg" src="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_1.jpg" alt="<?php echo $row_Article['titre']; ?>" height="390" width="390" border="0" /></a>
              <script type="text/javascript">
			  $('#lien').loupe({
  				width: 250, // width of magnifier
  				height: 250, // height of magnifier
  				loupe: 'loupe' // css class for magnifier
			  });
			  </script>
            </div>
            <div class="thumbs">
              <table>
                <tr>
                  <td><a href="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_1.jpg"><img src="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_1.jpg" alt="Cliquez sur la vignette pour agrandir" title="Cliquez sur la vignette pour zoomer" height="75" width="75" border="0" /></a></td>
                  <td><a href="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_2.jpg"><img src="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_2.jpg" alt="Cliquez sur la vignette pour agrandir" title="Cliquez sur la vignette pour zoomer" height="75" width="75" border="0" /></a></td>
                  <td><a href="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_3.jpg"><img src="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_3.jpg" alt="Cliquez sur la vignette pour agrandir" title="Cliquez sur la vignette pour zoomer" height="75" width="75" border="0" /></a></td>
                  <td><a href="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_4.jpg"><img src="../Catalogue/Photos_articles/<?php echo $row_Article['id']; ?>_4.jpg" alt="Cliquez sur la vignette pour agrandir" title="Cliquez sur la vignette pour zoomer" height="75" width="75" border="0" /></a></td>
                </tr>
              </table>
            </div></td>

je dirais de relancer la fonction loupe a chaque changement de vigniette ;-)

Merci matheo the snake :-) C'est super cool ! Effectivement, je n'avais qu'à relancer la fonction loupe. C'était vraiment simple et je vais pouvoir passer à autre chose, super !!! Pour ceux qui sont intéressés, voici le code corrigé :

<script type="text/javascript">
$(document).ready(function(){
	$(".thumbs a").click(function(){
	  var largePath = $(this).attr("href");
	  $("#largeImg").attr({ src: largePath });
	  $("#lien").attr("href", largePath);
	  $("#ok").attr("href", largePath);
	  $('#lien').loupe({
  				width: 250, // width of magnifier
  				height: 250, // height of magnifier
  				loupe: 'loupe' // css class for magnifier
			  });
	  return false;
	});
});
</script>