Question : Using jqzoom (jquery)

I am using jqzoom to zoom in on a product, this works fine, however i've set it up so that when a thumbnail is clicked, the main image changes and the zoom image should change, but this isn't working.

I've added the main image as the href value and the zoom image as the rel value, both seem to be getting passed but the zoom shot doesn't change:

<li><a href="/products/page_e7dkp club-0081.jpg" class="thumb1" rel="/products/e7dkp club-0081.jpg"><img src="/image_resize.php?img=products/e7dkp club-0081.jpg&wh=45&xy=750" /></a></li>

My jquery code is as below, you can view the example at:

http://www.desired.arrivaldesign.co.uk/shop/men/hugo_boss/shirts/hugo_boss_paddy_polo

Many thanks

Chris

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:

           
           
          (function ($) {
	$.fn.vAlign = function() {
		return this.each(function(i){
		var ah = $(this).height();
		var ph = $(this).parent().height();
		var mh = (ph - ah) / 2;
		$(this).css('padding-top', mh);	
		});	
	};
	})(jQuery);

 	$(document).ready(function(){
		$('.pic_holder img').vAlign();
		$(".thumb1").css('border-color', '#ccc');
		$('.prod_thumbs ul').hoverscroll();
		
		$(function() {
			var options =
			{
				zoomWidth: 330,
				zoomHeight: 293
			}
			$(".jqzoom").jqzoom(options); 
		});
		
		$(".prod_thumbs a").click(function(event){
			event.preventDefault();
			var newSRC = $(this).attr("href");
			$("img#main_pic").attr("src", newSRC);
			var newREL = $(this).attr("rel");
			$("#zoomer").attr("href", newREL);
			$(".prod_thumbs a").css('border-color', '#fff');
			$(this).css('border-color', '#ccc');
		});

 	});

           
         

Answer : Using jqzoom (jquery)

Hi djfenom,
You just need to re-call the zoom function on the thumbnail click.

place the function again within the .prod_thumbs a click event as shown below, I've also attached a working example for you

I think it might be worth to mention as well that your page breaks on IE8 with the script error, and although it runs on IE7 there is a strange behaviour in the zoom where the crosshair appears within a qhite sqaure box with the semi-transparent box underneath.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:

           
           
             $(".prod_thumbs a").click(function(event){
			event.preventDefault();
			var newSRC = $(this).attr("href");
			$("img#main_pic").attr("src", newSRC);
			var newREL = $(this).attr("rel");
			$("#zoomer").attr("href", newREL);
			$(".prod_thumbs a").css('border-color', '#fff');
			$(this).css('border-color', '#ccc');
		});


// To This //
$(".prod_thumbs a").click(function(event){
			event.preventDefault();
			var newSRC = $(this).attr("href");
			$("img#main_pic").attr("src", newSRC);
			var newREL = $(this).attr("rel");
			$("#zoomer").attr("href", newREL);
			$(".prod_thumbs a").css('border-color', '#fff');
			$(this).css('border-color', '#ccc');
			$(function() {
			    var options =
			    {
				    zoomWidth: 330,
				    zoomHeight: 293
			    }
			    $(".jqzoom").jqzoom(options); 
		    });
		});

           
         