EasyZoom icon indicating copy to clipboard operation
EasyZoom copied to clipboard

Optional between delay mouseenter and show

Open slindstr opened this issue 9 years ago • 4 comments

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!

slindstr avatar Nov 12 '15 00:11 slindstr

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%;".

fernandoval avatar Jan 17 '16 14:01 fernandoval

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.

i-like-robots avatar Jan 17 '16 23:01 i-like-robots

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.

fernandoval avatar Jan 18 '16 12:01 fernandoval

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

nolexity avatar Jan 07 '20 13:01 nolexity