After updating image in dom, one need to enter image twice for zoom to kick in when image is very large

[carolineschnapp]

Hi there Jack!

I am using your plugin in several themes, always in that typical scenario where I have a product page with a gallery of images composed of one main large image and small thumbnails.

Clicking on a thumbnail updates the main image, and moving the cursor over the main image makes you see that image zoomed-in.

The problem is that after my JavaScript updates the main image (when a thumbnail has been clicked), if the zoomed-in image is very large, and has not been cached already, moving the cursor over the main image may not result in the plugin kicking in. One needs to move the cursor out of the image and over it again, and then the plugin works.

The issue is very similar to the one described here: https://github.com/jackmoore/zoom/issues/59 Except the solution you show here: http://jsfiddle.net/uz4jasp6/3/ does not work for me because when the image is updated and the zoom reset on the image, I don't yet want to see the main image zoomed-in, I just want it to be ready to be zoomed in when I move my cursor to it.

Here is the bug:

Code used:

timber.productImageZoom = function () {
  // Destroy zoom (in case it was already set), then set it up again
  timber.cache.$productImageWrap.trigger('zoom.destroy');
  timber.cache.$productImageWrap.addClass('image-zoom').zoom({
    url: timber.cache.$productImage.attr('data-zoom')
  });
};

Here is what happens with the work-around:

Code used:

timber.productImageZoom = function () {
  // Destroy zoom (in case it was already set), then set it up again
  timber.cache.$productImageWrap.trigger('zoom.destroy');
  timber.cache.$productImageWrap.addClass('image-zoom').zoom({
    url: timber.cache.$productImage.attr('data-zoom'),
    callback: function() {
      $(this).trigger('mouseenter').trigger('mousemove');
    }
  });
};

[ponpondev]

I'm also experiencing the same problem... no one has found a way to work this around yet, I assume...

[braincomb]

@carolineschnapp @trantinan2512 You can try adding trigger('mouseleave') at the end so it won't get stuck in initial zoomed in state, like so:

$(this).trigger('mouseenter').trigger('mousemove').trigger('mouseleave');

But the above will produce a brief flicker effect, which is not very desirable. I'm still looking for a better workaround myself.