Link to home
Start Free TrialLog in
Avatar of djfenom
djfenom

asked on

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

(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');
		});

 	});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of remorina
remorina
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of djfenom
djfenom

ASKER

Thanks remorina, knew it'd be something simple!

I see what you mean about the square box, it's very strange, it does it in Firefox too, any ideas?
Found a problem with remorina's solution, it causes a glitch where you have to enter the image for zooming with your mouse but only changes the image after leaving the image with your mouse and re-entering.

To fix, you need to "unbind()" the jqzoom and then call it again:


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

Open in new window

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
djfenom,
The square box seems to be triggered by the fourth image, the highlight renders as a horizontal rectangle while in the other 3 renders as a vertical rectangle.
When I tried using a different image that has similar proportions to the other three it worked fine without rendering vertically, so you can try adjusting the image and thumbnail sizes, and it might be a good idea to keep all images of the same size as well.

Avatar of djfenom

ASKER

Thanks guys, working great now!