Lens start position wrong on zoom opening

[payalord]

If image is loading and mouse was moved during this process ans stopped, after image loaded lens position will be on old mouse position. This is wrong need to update mouse position before show lens.

[ermushko]

Yep. Tried to quick-fix fix, but no luck. It looks especially bad when using "inside" setting. And sometimes I can mouseleave target image, but lens won't hide.

[payalord]

I'll try to fix this soon and create new patch release.

[payalord]

Tested and created new release (v1.0.6). Looks like fixed now. Problem with lens on mouseleave I'll move to new issue.

[ermushko]

Can't confirm that it's fixed.

Zoom image now flashes from right position (while loading) back to not right (when loaded).
Before fixing, it was always on not right position, if you don't move mouse cursor.

Here's a video: https://drive.google.com/open?id=0BxWcJmOHfrKbaXJfX0JDUzZMMlk

[payalord]

Interesting, I'll continue to finish this. Thank you.

[payalord]

@ermushko can't replicate this problem on my end. somehow it works fine here. Can you provide please more details on your setup:

1. Browser version.
2. xzoom options you are used.
3. if possible css styles you used for xzoom.
4. jquery version.
5. If you altered event methods then this code for review too(if possible).

I'll try to replicate this here on my end then i'll be able to see exactly what the problem is.

[ermushko]

Tried it on other PC - same issue! So, I think, it's something in the code.

HTML markup piece:
<div class="col-lg-6 col-lg-pull-3 col-md-5 col-md-pull-4 head-left text-center"><div class="xzoom-container"><img class="img-responsive xzoom" id="xzoom-default" title="" src="http://www.ikea.com/ru/ru/images/products/besto-kombinacia-d-hranenia-stekl-dverc__0350252_PE535139_S4.JPG" alt="БЕСТО" onerror="this.onerror=null;this.src='../assets/no-photo-500.gif';" xoriginal="http://www.ikea.com/ru/ru/images/products/besto-kombinacia-d-hranenia-stekl-dverc__0350252_PE535139_S5.JPG" style="width: 100%;"></div><div class="xzoom-thumbs"><div class="xzoom-thumbs-aligner"><a href="http://www.ikea.com/PIAimages/0350252_PE535139_S5.JPG" target="_blank"><img class="xzoom xzoom-gallery xactive" src="http://www.ikea.com/PIAimages/0350252_PE535139_S4.JPG" onerror="this.onerror=null;this.src='../assets/no-photo-100.gif';"></a><a href="http://www.ikea.com/PIAimages/0353480_PE537035_S5.JPG" target="_blank"><img class="xzoom xzoom-gallery" src="http://www.ikea.com/PIAimages/0353480_PE537035_S4.JPG" onerror="this.onerror=null;this.src='../assets/no-photo-100.gif';"></a><a href="http://www.ikea.com/PIAimages/0394169_PE560992_S5.JPG" target="_blank"><img class="xzoom xzoom-gallery" src="http://www.ikea.com/PIAimages/0394169_PE560992_S4.JPG" onerror="this.onerror=null;this.src='../assets/no-photo-100.gif';"></a></div></div></div>

JS:

$(document).ready(function () {
$(".xzoom").xzoom();
});

...

$.fn.xzoom.defaults = {
position: 'inside', //top, left, right, bottom, inside, lens, fullscreen, #ID
mposition: 'inside', //inside, fullscreen
rootOutput: true,
Xoffset: 0,
Yoffset: 0,
fadeIn: false,
fadeTrans: false,
fadeOut: false,
smoothZoomMove: 3,
smoothLensMove: 1,
smoothScale: 0,
defaultScale: 0, //from -1 to 1, that means -100% till 100% scale
scroll: false,
tint: false, //'#color'
tintOpacity: 0.0,
lens: false, //'#color'
lensOpacity: 0.0,
lensShape: 'box', //'box', 'circle'
zoomWidth: 'auto',
zoomHeight: 'auto',
sourceClass: 'xzoom-source',
loadingClass: 'xzoom-loading',
lensClass: 'xzoom-lens',
zoomClass: 'xzoom-preview',
activeClass: 'xactive',
hover: false,
adaptive: true,
lensReverse: false,
adaptiveReverse: false,
title: false,
titleClass: 'xzoom-caption',
bg: false //zoom image output as background
};

CSS:
.xzoom-lens,.xzoom-preview{box-shadow:0 0 10px rgba(0,0,0,.5)}.xzoom-lens img,.xzoom-preview img,.xzoom-source img{display:block;max-width:none;max-height:none;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.xzoom-container{display:inline-block}.xzoom-thumbs{text-align:center;display:block;margin:20px auto 0;font-size:0!important}.xzoom-thumbs .xzoom-thumbs-aligner{text-align:left;display:inline-block}.xzoom-thumbs .xzoom-thumbs-aligner a{padding:5px;text-decoration:none;display:inline-block}.xzoom-gallery,.xzoom-gallery2,.xzoom-gallery3,.xzoom-gallery4,.xzoom-gallery5{opacity:.5;width:80px;height:80px}.xzoom-hidden,.xzoom-source{display:block;position:static;float:none;clear:both}.xzoom-hidden{overflow:hidden}.xzoom-preview{background:#fff}.xzoom-lens{border:1px solid #555;cursor:crosshair}.xactive{box-shadow:0 0 0 2px #feca15;opacity:1}

Chrome 58.0.3029.110
jQuery v1.12.0

Nothing exotic is used on the page - just a themed bootstrap.

[ermushko]

I think it'd be better to attach the whole page.
Please, disable cache and look if it still works fine in your environment. Because on two my machines it does not. Maybe you should use network throttling to decrease loading speed to be able to replicate a bug.

Thank you.
xzoom.zip

[payalord]

@ermushko ok, I have released new patch version. You can download and test it. Now I hope it's fixed finally.

[ermushko]

Fixed!

But now I can't enable smooth lens move with "inside" setting. Am I doing something wrong?

position: 'inside',
mposition: 'inside', 
rootOutput: true,
Xoffset: 0,
Yoffset: 0,
fadeIn: true,
fadeTrans: true,
fadeOut: true,
smoothZoomMove: 3,
smoothLensMove: 6, 
smoothScale: 0,
defaultScale: 0,
scroll: false,
tint: false, 
tintOpacity: 0.0,
lens: false, 
lensOpacity: 0.0,
lensShape: 'box', 
zoomWidth: 'auto',
zoomHeight: 'auto',
sourceClass: 'xzoom-source',
loadingClass: 'xzoom-loading',
lensClass: 'xzoom-lens',
zoomClass: 'xzoom-preview',
activeClass: 'xactive',
hover: false,
adaptive: true,
lensReverse: false,
adaptiveReverse: false,
title: false,
titleClass: 'xzoom-caption',
bg: false 

[payalord]

@ermushko I have noticed that this 3 options smoothZoomMove, smoothLensMove, smoothScale is dependent on each other. In case of 0 on any of them smooth switched off. So the minimum value that is possible to be for any of them is "1" instead of "0", this probably will help you fix your smooth movement case.

later I'll fix this zero value issue too.

[ermushko]

That turned out to be true! Smooth lens move is dependent on "smoothScale=0" for switched off "scroll=false" setting.

[payalord]

This is because movement animation function for them is one. Anyway, this is a bug. And I'll move it to separate issue. Soon it will be fixed.

Did switching "smoothScale=1" helped you?

[ermushko]

Yes, turning "on" everything with "smooth" in var name made the trick.

[payalord]

Good, if you'll have any other issues or will need a help. Feel free to ask here. Thanks :)