plugin jquery jqzoom, implémentation, fonctionne à moitié

Bonjour,

je voudrais réaliser une gallery comme sur le modèle à l'adresse suivante : http://www.mind-projects.it/projects...emos.php#demo1
J'ai suivi la procédure, le principe du zoom au survol de la souris fonctionne mais pas le changement d'image lorsque l'on clique sur les miniatures.
Je ne suis pas un expert en javascript, loin de là, alors il y a peut-être quelque chose de simple qui m'échappe.
Avec mes remerciements pour votre aide, voici mon code :

Code:

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
 
<html> 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>sans titre 1</title>
 
<script type='text/javascript' src="jqzoom/js/jquery-1.6.js"></script>  
<script type='text/javascript' src="jqzoom/js/jquery.jqzoom-core.js"></script>  
 
<link rel="stylesheet" type="text/css" href="jqzoom/css/jquery.jqzoom.css"/>
<script type="text/javascript">
 
$(document).ready(function(){  
    $('.MYCLASS').jqzoom();  
});  
 
$(document).ready(function(){  
    var options = {  
            zoomType: 'standard',  
            lens:true,  
            preloadImages: true,  
            alwaysOn:false,  
            zoomWidth: 300,  
            zoomHeight: 250,  
            xOffset:90,  
            yOffset:30,  
            position:'left'  
            //...MORE OPTIONS  
    };  
    $('.MYCLASS').jqzoom(options);  
});  
</script>
</head>
 
<body>
 
<a href="image/village.jpg" class="MYCLASS"  title="Beuil" rel="gal1" >
<img src="image/village.jpg" /></a>
 
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '.image/annonce.jpg',largeimage: '.image/village.jpg'}">  
    <img src="image/village.jpg" height="70" width="70"/></a>  
 
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: '.image/valberg.jpg',largeimage: './image/valberg.jpg'}" > 
    <img src="image/valberg.jpg" height="70" width="70"> 
</a>  
 
<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './image/annonce.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">  
    <img src="image/valberg.jpg">  
</a>  
 
</body>
 
</html>