Dear All,

I am building a product info page where I have mouse over event which user point to a thumbnail and the product image on a fixed position will switch... I got this part to work.

and then I added jqZoom to the page where user can zoom into a particular part of the image by moving the mouse over the product image.

My problem is the jqZoom works fine for the first image where the zoom window appear on the right position which is on the right to the product image, but if I switch to another product image, the zoom window will always appear on the top left corner and no zoomed image is shown.

Please help.

Best Regards.

4 answers

Pawan 0
0
points

Hi snackmoore,

Any luck using JQzoom? I am also facing the same issue with multiple images. Zoom work on the first image but not on further images. I am seeing this issue with firefox.

Any fix for this issue?

Thanks, Pawan

Answered almost 7 years ago by Pawan
0
points

You need to unbind the jqzoom event from the div and reinitiate again the jqzoom with the new href and src parameters.

//removing the previous jqzoom object
jQuery(jQuery.jqzoom).remove();
//unbinding
jQuery("#old-div-id").unbind();
//binding
jQuery("#new-div-id").jqzoom();

Answered about 5 years ago by Tomislav Atanasoski
0
points

You need to work out which of the parent divs should be used as reference for the position:absolute positioning and give it position:relative.

or change the way the thumb/big image display works from position, to display...

what's happening I think is that one set of javascript is changing the position declaration of the image and then the zoom tries to position absolute based on that new location and gets messed up...

for what its worth the initial layout of thumbs and large image doesn't work in Safari, which may be due to the out of head CSS and JS links

Answered almost 7 years ago by Tony Crockford
  • I have already tried changing the position:absolute to relative but is not helping.... and you are right, the it does not work on Safari and Chrome... I thought that was a problem with display:block and display:none, someone suggested me to replace "display:none" with "" but no luck with that also... so i am quite stuck... snackmoore almost 7 years ago
  • I have already tried changing the position:absolute to relative but is not helping.... and you are right, the it does not work on Safari and Chrome... I thought that was a problem with display:block and display:none, someone suggested me to replace "display:none" with "" but no luck with that also... so i am quite stuck... snackmoore almost 7 years ago
0
points

Hi All, I had a similar problem which I solved by going to replace "href" and "src" attributes.

$('#MYIMAGEDETAIL').attr('href', imgDetail);

$('#MYIMAGEGENERAL').attr('src', imgGeneral);

Despite this, the bigger image was not updated, so i called again the jqzoom function and everithing works fine except the lens.

Everytime i call the jqzoom function it creates a new lens image and overlaps to others, the result is that the lens become less and less trasparent.

any suggestion?

thanks

Answered over 6 years ago by cristina