Thumbnails - JqZoom issue

[Chocome]

Hi !

 

I'm hardly preparing the release of my art website, but I have, since the installation a problem with JqZoom.

 

On my product page, the product images can be switched (as i wanted to) thanks to the thumbnails. The only problem is that the JqZoom doesn't switchs, and stays only on the cover image !

 

(for example - only in french, sorry ^^ - http://coco-fesse-et-porcelaine.com/home/43-0ushebti-de-l-epoque-ptolemaique.html ).

 

I tried everything to make the images switchs, so that we can magnify the other photographs, but, I obviously failed ...

 

here is the code on the product.tpl page (presta 1.5.6) : 

<!-- 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>

And here is the jqZoom code : 

//**************************************************************
// 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
}

Pleaaaase, I need your help ! I didn't slept the whole nignt and I still don't have a clue ...

[BoKr]

Hi

 

I am just an autodidact and still learning basics but in your code above it says:

alt="{$imageTitlte}"

May be it is a mistype. I found this in the original ps 1.5.6.2 and 1.6x so I will ask in the main forum since I am interested in that too (SEO...)

[Chocome]

Thanks for answering !

 

The bug came neither from the first nor the other file. It was in the product.js file on line 554 (i'm not sure).

 

A friend of mine replaced something there ...

[joseantgv]

Copy this code at product.js

//update display of the large image
function displayImage(domAAroundImgThumb, no_animation)
{
	if (typeof(no_animation) == 'undefined')
		no_animation = false;
	if (domAAroundImgThumb.prop('href'))
	{
		var new_src = domAAroundImgThumb.prop('href').replace('thickbox', 'large');
		var new_title = domAAroundImgThumb.prop('title');
		var new_href = domAAroundImgThumb.prop('href');
		if ($('#bigpic').prop('src') != new_src)
		{
			$('#bigpic').prop({
				'src' : new_src,
				'alt' : new_title,
				'title' : new_title
			}).load(function(){
				if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
			 		$(this).attr('rel', domAAroundImgThumb.attr('href'));//by zainoz
			});
		}
		$('#views_block li a').removeClass('shown');
		$(domAAroundImgThumb).addClass('shown');
		//@joseantgv: avoid open image in a new window when clicked
		$('#views_block li a').click(function(e) {
    			e.preventDefault();
		});
	}
}