Bonjour,

J'ai découvert hier la fonction pour afficher un zoom sur l'image principale du produit mais aujourd'hui j'ai besoin de faire certains paramétrage dessus, j'utilise un script en plus (ci-dessous) pour qu'au clic sur une image additionnelle elle prenne la place de l'image principale.
1er problème : quand je clique sur un des visuels additionnels il prend bien la place mais quand je passe ma souris dessus c'est l'image principale d'origine qui apparait dans le zoom
2ème problème : je voudrais pouvoir paramétrer le positionnement de la div du zoom mais jusque là aucun de mes appels ne prends le dessus sur le script original (cloud-zoom)

Voici mon code :

// Pour les images additionnelles
$('#visuels_additionnels .additionnalPicture').each(function() {
$(this).click(function() {
// je change
var src = $(this).children("img").attr('src');
var grdeimage = src;
if (grdeimage) {
var src_grdeimage = grdeimage.replace("thumbnails/", "");
$(this).attr("src", src_grdeimage);
}
$("#productPicture img").attr("src", src_grdeimage);
// Selection/Deselection photo
$('#additionnalsPictures .additionnalPicture').each(function() {
$(this).removeClass('current');
})
$(this).addClass('current');
// pour cloud-zoom je récupére le href de mon image
$('#productPicture .cloud-zoom').each(function() {
var src = $(this).children("img").attr('src');
var href = src;
// je change le href de mon lien '.cloud-zoom'
$(this).attr('href', href);
// j'essaye également de le faire sur la div '#cloud-zoom-big' dans le background-image
// $('#cloud-zoom-big').css('background-image', 'url(' + href + ')');
$('#cloud-zoom-big').each(function(e){
e.preventDefault();
});
});
})
});

Pour la div '#cloud-zoom-big' c'est le background-image qui doit être changé mais si je le fait avec css(), cela ne marche pas, j'ai aussi essayer un e.preventDefault(), là encore rien ne se passe je continue à avoir le zoom avec la mauvaise image.

Merci de votre aide!

Up!?

Bon alors en fait le seul moyen que j'ai trouvée pour pouvoir passer mes propres paramètres, c'est de ne pas utiliser la zoom de medialibs!
En fait à la fin de la template produit on peut choisir entre "lightbox" et "zoom", je ne met rien du coup mon image est seule sans <a> autour.
Donc toujours dans ce template je rajoute le <a> autour du "mx:text id="picture" et j'y applique la classe "cloud-zoom", ce qui donne :

<a class="cloud-zoom" rel="position : 'inside'"><mx:text id="picture" /></a>// inside c'est pour que le zoom s'affiche à l'intérieur de mon image

Et j'appel le script cloud zoom dans ma main page.