11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Pb jqzoom sur gallery

Bonjour,

je voudrais réaliser une gallery comme sur le modèle à l'adresse suivante : http://www.mind-projects.it/projects/j [...] mos.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 :

<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>
salut....

Erreur de débutant, ne connaissant pas grand chose, pour pas dire rien, au JS

tu instancies 2 fois jqzoom

Alors oui dans l'exemple il met les deux lignes, mais si tu lis un minimum, tu comprendra laquelle il faut enlever Smiley smile
Là où tu as juste, c'est que j'y pas grand chose en JS. Effectivement j'ai bien vu qu'il faisait 2 fois appel à $('.MYCLASS').jqzoom(); J'ai lu et relu (en anglais) les explications.
Je vais revoir le code mais il me semble que j'ai déjà essayé de supprimer le 2eme appel : $('.MYCLASS').jqzoom(options);

Je te tiens au courant. Merci tout de même.
donc t'es pas fort en anglais non plus Smiley smile

c'est le premier qui ne sert à rien...

le premier est l'exemple d'appel simple sans configuration

le second est l'exemple d'appel AVEC options....

supprime le premier ça ira déjà mieux
tout ça ne sert à rien dans ton cas => $(document).ready(function(){
$('.MYCLASS').jqzoom();
});
c'est bizarre je ressens comme un malin plaisir à pointer du doigt mes incompétences... Smiley biggrin .
Bon, comme mes lacunes sont réelles, je laisse mon orgueil de côté et continue à m'acharner sur mon pb.
J'ai donc enlever le 1er appel à la fonction qui ne me concerne pas.
Voici donc le nouveau code... qui ne fonctionne pas mieux !! En fait j'arrive pas à comprendre le class="zoomThumbActive" qui n'est déclaré nulle part, même pas dans la feuille de style css.
Le zoom fonctionne toujours sur l'image qui a class="MYCLASS" mais je ne parviens pas à faire fonctionner le principe du changement d'image de la gallery en cliquant sur les miniatures (et on ne se moque pas !).
Merci pour l'attention que tu portes :

<!DOCTYPE html>
<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(){  
    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>
excuse moi de répondre tardivement Smiley smile

tu as mis le doigt dessus tout seul Smiley smile bravo...

en effet cette classe est utile sur l'élément actif uniquement, celui de base...

ensuite c'est le script qui se chargera de déplacer cette classe "réservée" à la vignette active...

aller, arrete de t'arracher le s cheveux laisse la uniquement sur la première image et ça va fonctionner nickel Smiley cligne
Merci beaucoup pour ton aide, tout fonctionne. Je constate juste un léger bug avec chrome : quand la page est chargée, si je clique sur la miniature de l'image qui est est déjà présente à l'écran, ça bloque sur loading zoom, mais dès que je clique sur une autre miniature et si je reviens sur la première, il n'y a pas de pb, va comprendre... sur firefox et ie par contre pas de pb.

Une nouvelle fois merci d'avoir pris le temps de répondre à un futur grand (great en anglais Smiley murf ) de jquery !!
Sujet clos
Aller à