Bonjour,

Je souhaite appliquer Jqzoom, librairie javascript qui permet de faire un zoom au mouvement de la souris sur un photo.
J'ai besoin de deux images, une vignette et une photo en plus grande dimension.

Pour appliquer Jqzoom, je dois ajouter le paramètre jqimg="" dans la balise < img> )avec le chemin de l'image zoomée.

le code qui correspond à l'affichage de ma photo est :

< mx:text id="picture" />

- Comment modifier le code modelixe ci-dessus pour spécifier que l'image doit être une vignette?
- Comment ajouter le paramètre jqimg (qui doit normalement ce situer dans la balise < img > avec le chemin vers l'image dans sa taille originale ?

Merci d'avance !

PS : Je travaille sur la page product.html de la boutique Imagine.

Re-bonjour,

Je n'ai pas de succès avec ma question...

en gros j'aimerais avoir l'équivalent de :

< a src="monImageEnFullSize.jpg" class="jqzoom" style=""> < img src="monImageEnThumbails" /> </a>

en modelixe...

Merci d'avance,

Bonjour,

En modeliXe directement, il n'y a pas de balise "image taille réelle" / "image taille vignette". Le choix de la taille générée par le mx se fait via le factory (onglet "configurer" en mode avancé, Modeules > Catalogue > Produit > tailles des visuels).

Ensuite, l'idée est d'utiliser JavaScript pour générer l'autre taille d'image. Prenons comme hypothèse que la configuration du factory affiche la vignette. Dans votre template, vous aurez un code du genre :

< a href="#" class="jqzoom">< mx:text id="picture" /></a>

A partir de là, il faut lancer une fonction JavaScript qui va aller chercher tous les liens A portant la classe "jqzoom", puis qui va aller regarder le SRC de l'image contenue, le retravailler pour en extraire l'URL de l'image taille réelle, pour enfin mettre cette info en place dans le HREF du lien. Cette fonction doit être lancée à la fin du chargement de la page, mais AVANT le lancement du script Jqzoom. Voici un exemple de la fonction (non testée) :

 
function mise_en_place_jqzoom()
{
  var list_img = $('a.jqzoom').children('img'); // on récupère le tableau des images contenues dans des liens jqzoom
  var list_len = list_img.len; // on calcule la taille du tableau...
  for(cpt = 0;cpt < list_len;ctp++) // ... pour faire une boucle dessus
  {
    var img_courante = list_img[cpt]; // l'image
    var lien_courant = img_courante.parentNode; // le lien qui contient l'image
 
    var url_img = new String(img_courante.src); // on récupère l'URL du SRC de l'image
 
     // on met comme HREF du lien l'URL de la miniature à laquelle on a enlevé thumbnails/, 
    // ce qui correspond à l'URL de la version taille réelle.
    lien_courant.href = url_img.replace('thumbnails/','');
  }
}
 
// lancement automatique de la fonction au chargement de la page :
$(document).ready(function() {
 
  mise_en_place_jqzoom();
 
});
 

Bonjour,

Merci de votre réponse. J'ai donc testé :

<a href="#" class="jqzoom" style="" title="zoom" ><mx:text id="picture" /></a>

puis le script javascript (placé en fin de page):

<script>
function mise_en_place_jqzoom()
{
  var list_img = $('a.jqzoom').children('img'); // on récupère le tableau des images contenues dans des liens jqzoom
  var list_len = list_img.len; // on calcule la taille du tableau...
  for(cpt = 0;cpt < list_len;ctp++) // ... pour faire une boucle dessus
  {
    var img_courante = list_img[cpt]; // l'image
    var lien_courant = img_courante.parentNode; // le lien qui contient l'image
 
    var url_img = new String(img_courante.src); // on récupère l'URL du SRC de l'image
 
     // on met comme HREF du lien l'URL de la miniature à laquelle on a enlevé thumbnails/, 
    // ce qui correspond à l'URL de la version taille réelle.
    lien_courant.href = url_img.replace('thumbnails/','');
  }
}
 
// lancement automatique de la fonction au chargement de la page :
$(document).ready(function() {
 
  mise_en_place_jqzoom(); 
 
  $(".jqzoom").jqzoom(); // lancement Jqzoom
 
 
});
</script>
 

...Sans succès. la fonction Javascript, bien qu'elle a l'air de faire exactement ce que je cherche, ne fonctionne pas. J'ai pourtant lancé Jqzoom après la fonction javascript.

(Le script Jqzoom fonctionne bien car j'ai testé avec l'équivalent en html et des liens d'image en dur)

Auriez vous une idée, ou vu une erreur de ma part ?

Merci d'avance !

Bonjour,

Pour vos messages, le bouton 'aperçu' vous permet de vous assurer du résultat quand vous faîtes des mises en page complexes. La syntaxe de la balise CODE est disponible tout en bas dans la FAQ (il faut préciser le language pour que la balise sache quel type de mise en page on attend d'elle).

Pour votre cas en particulier, envoyez-moi un ticket au support avec l'URL d'une page présentant le problème, et je regarderai ce qui ne va pas. Si la correction peut intéresser la communauté, je me chargerai d'expliquer la solution à la suite de ce message. :)

J'ai fait un tuto ou je propose une solution simple pour mettre en place tout ça.

J'en ai également profité pour optimiser le code jquery (en 5 lignes, qui dit mieux ;)

par ici :
http://communaute.medialibs.com/forum/topic-1616.html