Zoom acting strange after changing src, tried everything

[Ometecuthli]

Hi, the jZoom is working flawless on a single picture but as soon as I change the SRC and re-call the zoom then the pictures just moves a little bit when I hover with my mouse over it, but it does not zoom in.

I tried every solution I found on GIT and the internet but nothing worked for me so far. I hope you, or anyone else who reads this can help me out.

The javascript that I wrote and the container in which the image rests:

<div class="product-details-images">
    <div class="product-details-images_big bigImage" data-image="<?php echo $mainimg?>">
        <a href="<?php echo $g_oProduct->ImageName(3,$alt);?>" title="<?php echo $g_oProduct->Title();?>">
            <img src="<?php echo $mainimg?>" alt="<?php echo $alt_text; ?>" height="400" height="800" itemprop="image" />
        </a>
    </div>    
</div>

*** thumbnails are here ***

[wegelagerer]

@Devbizz Have you been able to resolve the issue? I have the exact problem.

[lindseybradford]

Same.

[miguelsxvi]

I have been able to change the src once keeping the functionality by triggering zoom.destroy first and after that calling again the function zoom(), yet the second time I change it the plugin stops working. My code changes the src attr when clicking a different img, so I trigger the zoom.destroy on mousedown event. Here's the code:

$('img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom();

$("#").mousedown( function(event) {
    switch (event.which) {
      case 1: //left click
            $("img").attr("src", $(this).attr("id") + ".jpg")
                                    .trigger('zoom.destroy')
                                    .zoom();
            break;
        case 2: //middle click
            break;
        case 3: //right click
            break;
    }
  });

Any ideas which may improve this? Because this is my best try.

[miguelsxvi]

Found the solution. Besides triggering zoom.destroy, the enlarged image with class "zoomImg" must be deleted. Also I was calling .zoom() on the img and it has to be on the parent. Thus, the updated code looks like this:

$('img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom();

$("#").mousedown( function(event) {
    switch (event.which) {
      case 1: //left click
            $(".zoomImg").remove();
            $(".photoContainer img").attr("src","resources/camisetas/"+ $(this).attr("id") + ".jpg")
                                    .trigger('zoom.destroy')
                                    .parent()
                                    .zoom();
            break;
        case 2: //middle click
            break;
        case 3: //right click
            break;
    }
  });

The only remaining issue is that there is a tiny white blink when changing the img in Firefox (in Chrome it appears to run smoothly), caused by deleting the zoomImg I assume. Hope this helps

[jackmoore]

Besides triggering zoom.destroy, the enlarged image with class "zoomImg" must be deleted.

That was a bug that's fixed now as of 1.7.16, sorry about that. For the current release you won't need to manually remove '.zoomImg'. Just trigger the destroy event and assign zoom again.