Utilisation de Jqzoom dans la boutique
https://www.medialibs.com/partenariat/forum/tous-les-forum/topic-1198.html
daily12024-03-29T07:42:22+01:002024-03-29T07:42:22+01:00text/html2009-10-20T13:29:59+01:00Maxime Bernard-JacquetRe : Utilisation de Jqzoom dans la boutique (le 20/10/2009 à 15:29)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1619.html#post1619
J'ai fait un tuto ou je propose une solution simple pour mettre en place tout ça. <br/><br/>J'en ai également profité pour optimiser le code jquery (en 5 lignes, qui dit mieux ;)<br/><br/>par ici : <br/><a href="http://communaute.medialibs.com/forum/topic-1616.html">http://communaute.medialibs.com/forum/topic-1616.html</a>text/html2009-01-29T16:38:02+01:00Thomas HesseRe : Utilisation de Jqzoom dans la boutique (le 29/01/2009 à 17:38)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1288.html#post1288
Bonjour,<br/><br/>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).<br/><br/>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. :)text/html2009-01-29T08:57:13+01:00Mickaël S.Re : Utilisation de Jqzoom dans la boutique (le 29/01/2009 à 09:57)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1286.html#post1286
Bonjour,<br/><br/>Merci de votre réponse. J'ai donc testé : <br/><br/><pre><span style="color: #009900;"><a onclick="window.open(this.href);return false;" href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"jqzoom"</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">""</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"zoom"</span> <span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><mx:<span style="color: #000066;">text</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"picture"</span> /<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span></pre><br/><br/>puis le script javascript (placé en fin de page): <br/><br/><pre><span style="color: #009900;"><a onclick="window.open(this.href);return false;" href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script></span></a></span>
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 <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> list_len;ctp++<span style="color: #66cc66;">)</span> // ... pour faire une boucle dessus
<span style="color: #66cc66;">{</span>
var img_courante = list_img<span style="color: #66cc66;">[</span>cpt<span style="color: #66cc66;">]</span>; // l<span style="color: #ff0000;">'image
var lien_courant = img_courante.parentNode; // le lien qui contient l'</span>image
var url_img = new String<span style="color: #66cc66;">(</span>img_courante.<span style="color: #000066;">src</span><span style="color: #66cc66;">)</span>; // on récupère l<span style="color: #ff0000;">'URL du SRC de l'</span>image
// on met comme <span style="color: #000066;">HREF</span> du lien l<span style="color: #ff0000;">'URL de la miniature à laquelle on a enlevé thumbnails/,
// ce qui correspond à l'</span>URL de la <span style="color: #000066;">version</span> taille réelle.
lien_courant.<span style="color: #000066;">href</span> = url_img.replace<span style="color: #66cc66;">(</span><span style="color: #ff0000;">'thumbnails/'</span>,<span style="color: #ff0000;">''</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
// lancement automatique de la fonction au chargement de la page :
$<span style="color: #66cc66;">(</span>document<span style="color: #66cc66;">)</span>.ready<span style="color: #66cc66;">(</span>function<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
mise_en_place_jqzoom<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
$<span style="color: #66cc66;">(</span><span style="color: #ff0000;">".jqzoom"</span><span style="color: #66cc66;">)</span>.jqzoom<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>; // lancement Jqzoom
<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span>;
<span style="color: #000000; font-weight: bold;"></script></span></span>
</pre><br/><br/>...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.<br/><br/>(Le script Jqzoom fonctionne bien car j'ai testé avec l'équivalent en html et des liens d'image en dur)<br/><br/>Auriez vous une idée, ou vu une erreur de ma part ?<br/><br/>Merci d'avance !<br/>text/html2009-01-28T11:13:17+01:00Thomas HesseRe : Utilisation de Jqzoom dans la boutique (le 28/01/2009 à 12:13)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1285.html#post1285
Bonjour,<br/><br/>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).<br/><br/>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 :<br/><pre><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> a <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"jqzoom"</span><span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> mx:<span style="color: #000066;">text</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"picture"</span> /<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span></pre><br/><br/>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) :<br/><pre>
<span style="color: #003366; font-weight: bold;">function</span> mise_en_place_jqzoom<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>
<span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> list_img = $<span style="color: #66cc66;">(</span><span style="color: #3366CC;">'a.jqzoom'</span><span style="color: #66cc66;">)</span>.<span style="color: #006600;">children</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'img'</span><span style="color: #66cc66;">)</span>; <span style="color: #009900; font-style: italic;">// on récupère le tableau des images contenues dans des liens jqzoom</span>
<span style="color: #003366; font-weight: bold;">var</span> list_len = list_img.<span style="color: #006600;">len</span>; <span style="color: #009900; font-style: italic;">// on calcule la taille du tableau...</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #66cc66;">(</span>cpt = <span style="color: #CC0000;">0</span>;cpt < list_len;ctp++<span style="color: #66cc66;">)</span> <span style="color: #009900; font-style: italic;">// ... pour faire une boucle dessus</span>
<span style="color: #66cc66;">{</span>
<span style="color: #003366; font-weight: bold;">var</span> img_courante = list_img<span style="color: #66cc66;">[</span>cpt<span style="color: #66cc66;">]</span>; <span style="color: #009900; font-style: italic;">// l'image</span>
<span style="color: #003366; font-weight: bold;">var</span> lien_courant = img_courante.<span style="color: #006600;">parentNode</span>; <span style="color: #009900; font-style: italic;">// le lien qui contient l'image</span>
<span style="color: #003366; font-weight: bold;">var</span> url_img = <span style="color: #003366; font-weight: bold;">new</span> String<span style="color: #66cc66;">(</span>img_courante.<span style="color: #006600;">src</span><span style="color: #66cc66;">)</span>; <span style="color: #009900; font-style: italic;">// on récupère l'URL du SRC de l'image</span>
<span style="color: #009900; font-style: italic;">// on met comme HREF du lien l'URL de la miniature à laquelle on a enlevé thumbnails/, </span>
<span style="color: #009900; font-style: italic;">// ce qui correspond à l'URL de la version taille réelle.</span>
lien_courant.<span style="color: #006600;">href</span> = url_img.<span style="color: #006600;">replace</span><span style="color: #66cc66;">(</span><span style="color: #3366CC;">'thumbnails/'</span>,<span style="color: #3366CC;">''</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: #009900; font-style: italic;">// lancement automatique de la fonction au chargement de la page :</span>
$<span style="color: #66cc66;">(</span>document<span style="color: #66cc66;">)</span>.<span style="color: #006600;">ready</span><span style="color: #66cc66;">(</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
mise_en_place_jqzoom<span style="color: #66cc66;">(</span><span style="color: #66cc66;">)</span>;
<span style="color: #66cc66;">}</span><span style="color: #66cc66;">)</span>;
</pre>text/html2009-01-28T08:28:19+01:00Mickaël S.Re : Utilisation de Jqzoom dans la boutique (le 28/01/2009 à 09:28)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1279.html#post1279
Re-bonjour,<br/><br/>Je n'ai pas de succès avec ma question...<br/><br/>en gros j'aimerais avoir l'équivalent de : <br/><pre><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> a <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"monImageEnFullSize.jpg"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"jqzoom"</span> <span style="color: #000066;">style</span>=<span style="color: #ff0000;">""</span><span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> img <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"monImageEnThumbails"</span> /<span style="color: #000000; font-weight: bold;">></span></span> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span></pre><br/><br/>en modelixe...<br/><br/>Merci d'avance,text/html2008-11-06T07:29:41+01:00Mickaël S.Utilisation de Jqzoom dans la boutique (le 06/11/2008 à 08:29)
https://www.medialibs.com/partenariat/forum/tous-les-forum/post-1198.html#post1198
Bonjour,<br/><br/>Je souhaite appliquer Jqzoom, librairie javascript qui permet de faire un zoom au mouvement de la souris sur un photo. <br/>J'ai besoin de deux images, une vignette et une photo en plus grande dimension.<br/><br/>Pour appliquer Jqzoom, je dois ajouter le paramètre jqimg="" dans la balise < img> )avec le chemin de l'image zoomée.<br/><br/>le code qui correspond à l'affichage de ma photo est : <br/><pre><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span></a> mx:<span style="color: #000066;">text</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"picture"</span> /<span style="color: #000000; font-weight: bold;">></span></span></pre><br/><br/> - Comment modifier le code modelixe ci-dessus pour spécifier que l'image doit être une vignette?<br/> - 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 ?<br/><br/>Merci d'avance !<br/><br/>PS : Je travaille sur la page product.html de la boutique Imagine.<br/>