Zooming not moving unless mouse re-enters image

[engelfrost]

If I initialize a zoomable image under the current cursor position, zooming does not work until I leave and the re-enter the image.

Here is an example:

$('body').on('click', function () {
    $('body').html($('#template').html()); // Adds HTML with #zoom markup
    $('#zoom').zoom();
});

http://jsfiddle.net/na4ywkfq/

I have not found a fix or a work-around yet.

[ondreian]

Sorry for the premature comment earlier, your bug was a little more complicated than I thought, though the principles are the same. When you dynamically insert the image from the template into the DOM, the image may not be loaded yet, and this will cause inconsistent behavior. You should register Zoom on the wrapper after the image.onload event is fired, and the best fix i've found (I do this with dynamically created Backbone.Views currently) is to force the deferring of the manual triggering zoom.mouseenter and zoom.mousemove events until the next event loop.

here is a working example:

http://jsfiddle.net/uz4jasp6/2/

remember your console can lie to you!

[jackmoore]

@engelfrost Ok, that makes sense. Zoom's behavior is started on mouseenter, and ends on mouseleave, but mouseenter has already happened before zoom has been assigned to the DOM element. I'm not sure at the moment how best to check for this within the plugin, but as a temporary fix you may just be able to trigger the mouseenter event immediately after you assign zoom. Ex:

$('#zoom').zoom().trigger('mouseenter');

[jackmoore]

Whoops, sorry. My comment doesn't help at all.

[jackmoore]

Thanks @ondreian, you are correct about the why and how. Here is a little cleaner version of your solution: http://jsfiddle.net/uz4jasp6/3/

Zoom provides a callback method with the context (this) assigned to the image element.

[ondreian]

Thanks @jackmoore didn't know about the callback trick, definitely better than my hack

[engelfrost]

Thank you, the callback version works fine, the first workaround only works when the image is cached.

[gleenk]

Hi guys, i have a similar problem. I load content via ajax in a div that fade in with an image inside. If mouse cursor is stucked on its, i have to exit image area and enter again to make zoom work. How to fix?

[Lucissa]

Same here

[SitanHuang]

Here is a little solution: $show_img_container.zoom({url: BIG_IMAGES[i]}).trigger('mouseover')