EasyZoom
EasyZoom copied to clipboard
Optional between delay mouseenter and show
First off, thanks again for EasyZoom - it's been really helpful!
I need to add a delay between mouseenter
and show
so I wrote some code that adds an optional delay and updated the documentation (PR incoming after I finish writing this...).
I could probably also do this in my own code when I bind an element, but figured it might be a common enough use case that others might benefit from it as well. Lemme know what you think; if the code needs any changes or it's just not right for the project no biggie.
Thanks again!
I am needing this feature, too.
To disable EasyZoom when resolution is smaller than 768px I am putting a DIV over it with class "visible-xs" and "position: absolute; top: 0; left: 0; width: 100%; height: 100%;".
Having considered this for some time (my apologies for taking so long, @slindstr - I've been very busy) I think this requires a combination of features. The 'mouse stop' event is useful when the users intention is to simply move their cursor over but not to interact with the zoom.
@fernandoval I think the issue you allude to requires something different. To zoom pictures on small - and we'll assume touch-enabled - devices it may be better to activate the zoom image with a standard zoom gesture as the user intention then is not ambiguous.
Yes. Will be awesome when EasyZoom can detect touch screen device and activate with zoom gesture. But this is not easy to implement. Then I did the easy way.
I fix it for myself in EasyZoom.prototype._onEnter
var that = this;
if (!touches || touches.length == 1) {
var showDelay;
if (!touches) {
showDelay = that.opts.mouseDelay;
} else {
showDelay = that.opts.touchDelay;
}
setTimeout(function() {
if (that.isMouseOver) {
e.preventDefault();
that.show(e, that);
}
}, showDelay);
}
and declaring mouseDelay:500
and touchDelay:500
variables in defaults