webleads-tracker

Zoom sur l'image d'un produit

willy leloutre
Je remonte une astuce sur le forum suite à une petite interrogation avec Nicolas (medialibs). Par défaut le lien vers l'image d'un produit est un lien html (monproduit-zoom.html), pour avoir un lien vers votre fichier '.jpg' vous pouvez procéder comme ceci :

1/ Placez un lien null (href="#") autour de
<mx:text id="picture" />


2/ Ensuite insérez ce javascript (jQuery) :

 
<!-- Gestion du Zoom sur les produits -->
    <script type="text/javascript">
      $(function() {
        // je récupère la src de mon image
        var thumbLinks = $("#productPicture").find("img"), firstThumbLink = thumbLinks.eq(0); 
        // j'envoie la src de mon image vers le href du lien
        $("#productPicture a").attr({  
          href: firstThumbLink.attr("src") 
        });
        // activation lightbox ou autre jqzoom par exemple
      	$(".jqzoom").jqzoom();
      });
    </script>
    <!-- Fin de Gestion du Zoom sur les produits -->
 


et voilà...

Pensez à jQuery ! si il n'est pas intégré revoyez mon code JS !
willy - web com média

Guillaume
Bonjour,

J'ai suivi à la lettre votre astuce, malheureusement ma fênetre modale ne m'affiche aucun contenu, ce qui, je suppose est dû au fait que mon href ne doit pas recevoir correctement le lien de l'image source.

Voici mon code sur mon template mainPage.html :

<!-- APPEL JQUERY -->

<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

<!-- FANCYBOX -->
<script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
	$("a.fancybox").fancybox();
});
</script>


Et voici celui sur mon template product.html :

    <script type="text/javascript">
      $(function() {
        // je récupère la src de mon image
        var thumbLinks = $("#productPicture").find("img"), firstThumbLink = thumbLinks.eq(0); 
        // jenvoie la src de mon image vers le href du lien
        $("#productPicture a").attr({  
          href: firstThumbLink.attr("src") 
        });
    </script>

<div id="product" >  
	<mx:bloc id="update_price_js"></mx:bloc id="update_price_js">

	<div id="ProductLeftCol" >
	
	<div class="productPictures">
		<mx:bloc id="picture">
			<div id="productPicture">
				<a href="#" class="fancybox"><mx:text id="picture" /></a>
			</div>
		</mx:bloc id="picture">


Auriez-vous une idée ?