Problème entre JqZoom et le multi-images, zoom exclusivement sur la première image

[Chocome]

Bonjour à toute la communauté,

 

Je suis dans la phase finale de lancement de mon site prestashop, mais je rencontre un dernier problème quasi-insolvable (pas pour vous j'espère !).

 

Sur ma page produit, des thumbnails permettent de visualiser les différentes images du produit, et ils fonctioennet à merveille ... Cependant, lorsque je change d'image, le zoom reste sur l'image de couverture du produit. Impossible de zoomer sur les images complémentaire.

 

Un lien : http://coco-fesse-et-porcelaine.com/home/43-0ushebti-de-l-epoque-ptolemaique.html

 

vous allez rapidement constater que le site perd un peu de son sérieux !

 

Je met à toute fins utiles le code actuel de mon product.tpl :

<!-- product img-->
		<div id="image-block">
		{if $have_image}
			<span id="view_full_size">			
			
				<!-- definition de l'image -->
				<!--probleme de zoom: il zoom toujours sur la premiere image -->
				
				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"
					{if $jqZoomEnabled && $have_image} 
						class="jqzoom"
					{/if} title="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}
								{else}{$product->name|escape:'htmlall':'UTF-8'}
								{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}
											{else}{$product->name|escape:'htmlall':'UTF-8'}
											{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
				<span class="span_link">{l s='Maximize'}</span>
			</span>
		{else}
			<span id="view_full_size">
				<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
				<span class="span_link">{l s='Maximize'}</span>
			</span>
		{/if}
		</div>
		{if isset($images) && count($images) > 0}
		<!-- thumbnails -->
		<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
		{if isset($images) && count($images) > 3}<!--<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>-->{/if}
		<div id="thumbs_list">
			<ul id="thumbs_list_frame">
			{if isset($images)}
				{foreach from=$images item=image name=thumbnails}
					{assign var=imageIds value="`$product->id`-`$image.id_image`"}
					{if !empty($image.legend)}
						{assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
					{else}
						{assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
					{/if}
					<li id="thumbnail_{$image.id_image}">
						<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
							<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
						</a>
					</li>
				{/foreach}
			{/if}
			</ul>
		</div>
		{if isset($images) && count($images) > 3} <!-- <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a> --> {/if}
		</div>
		{/if}
		{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)|escape:'html'}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}
		
	</div>

et celui du Jqzoom, jquerry.jqzoom.js :

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 1.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// Released on Dec 05 2007
// i'm searching for a job,pick me up!!!
// mail: [email protected]
//**************************************************************

(function($) {
		$.fn.jqueryzoom = function(options) {
			var settings = {
				xzoom: 374,			//zoomed width default width
				yzoom: 374,			//zoomed div default width
				offset: 10,			//zoomed div default offset
				position: "left"	//zoomed div default position,offset position is to the right of the image
			};

			if(options)
				$.extend(settings, options);

			var noalt ='';

			$(this).hover(function() {
				var imageRelativeLeft = $(this).get(0).offsetLeft;
				var imageLeft = $($(this).get(0)).offset().left;
				var imageRelativeTop =  $(this).get(0).offsetTop;
				var imageTop = $($(this).get(0)).offset().top;
				var imageWidth = $(this).get(0).offsetWidth;
				var imageHeight = $(this).get(0).offsetHeight;

				attr = (typeof($(this).attr("rel")) != 'undefined' && $(this).attr("rel") != '') ? "rel" : "alt";
				noalt = $(this).attr(attr);
				var bigimage = noalt;
				//il ne change pas d'image lors du passage sur une autre photo
				//var bigimage = $link->getImageLink($product->link_rewrite, $image.id_image, 'thickbox_default')|escape:'html';
				//alert(bigimage);
				$(this).attr(attr, '');

				if($("div.zoomdiv").get().length == 0)
					//http://coco-fesse-et-porcelaine.com/160-thickbox_default/vase-en-porcelaine-de-canton-monte-en-lampe.jpg
					$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
					//alert(bigimage+"1\n"+options +"2\n"+ $(this).attr(attr)+"3\n");
					//$(this).after("<div class='zoomdiv'><img class='bigimg' src='"http://coco-fesse-et-porcelaine.com/160-thickbox_default/vase-en-porcelaine-de-canton-monte-en-lampe.jpg"'/></div>");

				if(settings.position == "right")
					leftpos = imageRelativeLeft + imageWidth + settings.offset;
				else
					leftpos = imageRelativeLeft - settings.xzoom - settings.offset;

				$("div.zoomdiv").css({top: imageRelativeTop,left: 606});
				$("div.zoomdiv").width(372);
				$("div.zoomdiv").height(600);
				$("div.zoomdiv").show();

				$(document.body).mousemove(function(e) {
					var bigwidth = $(".bigimg").get(0).offsetWidth;
					var bigheight = $(".bigimg").get(0).offsetHeight;
					var scaley ='x';
					var scalex= 'y';

					if(isNaN(scalex)|isNaN(scaley)) {
						var scalex = Math.round(bigwidth/imageWidth) ;
						var scaley = Math.round(bigheight/imageHeight);
					}

					mouse = new MouseEvent(e);

					scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;
					$("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;
					scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;
					$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
				});
			}, function() {
				$(this).attr(attr, noalt);
				$("div.zoomdiv").hide();
				$(document.body).unbind("mousemove");
				$(".lenszoom").remove();
				$("div.zoomdiv").remove();
			});
		}
})(jQuery);

function MouseEvent(e) {
	this.x = e.pageX
	this.y = e.pageY
}

Merci par avance de tous vos conseils ! (n'ayez pas peur de poster à n'importe quelle heure du jour ou de la nuit, je sauterai sur la réponse !)