Zoom on hover

[timrombergjakobsson]

Hi, is there any possibility to zoom in on high res image on hover? I've only found on click. Thanks!

[kingdido999]

No, I think zoom on hover would cause poor user experience and inconsistent behavior between desktop and touch device.

[kingdido999]

@timrombergjakobsson However, you can achieve this by simply adding an event listener to your images, then use API to open up the image. Something like this:

const zooming = new Zooming()

// listen() takes either a single Element or, in this case, a CSS selector
zooming.listen('.zoomable')

const zoomable = document.getElementsByClassName('zoomable')

for (let i = 0; i < zoomable.length; i++) {
  const img = zoomable[i]
  img.addEventListener('mouseenter', function onMouseEnter (event) {
    zooming.open(event.target)
  })
  
  img.addEventListener('mouseleave', function onMouseLeave (event) {
    zooming.close()
  })
}

JSFiddle

[timrombergjakobsson]

Ok, thanks!

[timrombergjakobsson]

Hm weird, I tried your example I only get Uncaught TypeError: zooming.listen is not a function? I tried console loging the instance of Zooming and its there but the function listen does not seem to exist?

[kingdido999]

@timrombergjakobsson Here is a working example. I updated the previous comment as well.

[timrombergjakobsson]

@kingdido999 Thanks a lot!

[veebull]

About example
When photo was zoomed via hover event if you begin to grab and your mouse is outside of image, photo is zooming out and it doesn't work anymore. It works only after reload a page.
How to fix it?