intera / vue-zoom-on-hover

responsive image with zoomed image on hover

vue-zoom-on-hover

responsive image with zoomed image on hover.

demo (ctrl+click to open in new tab)

this vue.js component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area

installation

include zoomOnHover.js, which registers the vue component and defines zoomOnHover, the variable for the component configuration object. also include zoomOnHover.css, which contains the needed styles

usage

minimal example (with an example div as parent container)

<div style="width:400px">
  <zoom-on-hover img-normal="image.jpg"></zoom-on-hover>
</div>

all options

<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true"
  @loaded="onload" @resized="onresize"></zoom-on-hover>

register the component with your vue app or component

new Vue({
  el: "#app",
  components: {
    zoomOnHover: zoomOnHover
  }
})

you can also check out demo/main.html for an example

features

• enabled/disabled property
• custom scale for zoomed image
• optionally a separate zoom image
• event when all images loaded
• event when images resized (responsive css, etc)
• basic touch support with zoom/unzoom on tap

caveats

if the parent container is bigger than the source image, the normal image stretches to the size of the parent container but the zoom image will have the original width (will be smaller for example)

possible enhancements

• support for touch devices

vue-zoom-on-hover's Issues

Zoomed image displayed to the side of original image

I was just wondering if it is possible to have the zoomed image displayed to side of the original image instead of on top of - also have the zoomed in area grayed a bit on the original so you can see what part is zoomed? Like Amazon does? I hope this makes sense...

This is setting styles directly and manually

vue-zoom-on-hover/zoomOnHover.js

Line 35 in b22bf28

this.$refs.zoom.style.opacity = 1

I recommend adding a zoomed-in state and using that to toggle a css class to change opacity of the two images.

Not in Safari?

Hi guys!

Great work here, it's been a very solid component!

It seems that it stopped working on destktop Safari? Tested on a couple different Macbooks.
The images appear, but no zoom on hover...
Doesn't seem to be working on any Safari before 12.1, what may be the problem?

Regards

My strange situation with max-width: 100%

Hello everyone, just want to share with the problem that I had and this is my mistake of inattention...
I connected the plugin to the project I'm already working on, and the plugin just did not work so that it did not do and the problem turns out to be in css max-width: 100%;.
I'm writing this because there might be some poor people like me who can't figure it out.

Sorry in advance for my English. ))

Support for touch devices

Hi, thanks for the great package, I was wondering if is possible to:

1. disable in phones (touch devices)?

2. or maybe a feature where you double click to zoom in (where you click), and double click to zoom out

Thanks for everything

[Vue warn]: Failed to mount component: template or render function not defined.

import PicZoom from 'vue-piczoom'
    import zoomOnHover from 'vue-zoom-on-hover'

    export default {
        name: 'app',
        components: {
            PicZoom,zoomOnHover
        },
}

shows this error in console.
[Vue warn]: Failed to mount component: template or render function not defined.

this is my template

Not working when i build for production

Hello, thanx for great work !!
I have n issue, i implemented to my vue js application it works pretty well !! but once i build application for production i have errors such as

TypeError: Cannot read properties of undefined (reading 'offsetWidth') at Proxy.initEventResized (OrderDetails-4d990c92.js:6:991) at Proxy.mounted (OrderDetails-4d990c92.js:6:1435) at index-bddb4464.js:1:34087 at nn (index-bddb4464.js:1:15467) at ht (index-bddb4464.js:1:15546) at e.__weh.e.__weh (index-bddb4464.js:1:33967) at Go (index-bddb4464.js:1:16839) at ed (index-bddb4464.js:1:17146) Pm @ index-bddb4464.js:1 mr @ index-bddb4464.js:1 nn @ index-bddb4464.js:1 ht @ index-bddb4464.js:1 e.__weh.e.__weh @ index-bddb4464.js:1 Go @ index-bddb4464.js:1 ed @ index-bddb4464.js:1 Promise.then (async) Zf @ index-bddb4464.js:1 mi @ index-bddb4464.js:1 (anonymous) @ index-bddb4464.js:1 Tc @ index-bddb4464.js:1 $a @ index-bddb4464.js:1 gi @ index-bddb4464.js:1 set value @ index-bddb4464.js:1 O.onUpdate:modelValue.c.<computed>.c.<computed> @ OrderDetails-4d990c92.js:6 (anonymous) @ index-bddb4464.js:1 OrderDetails-4d990c92.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addEventListener') at OrderDetails-4d990c92.js:6:815 at new Promise (<anonymous>) at OrderDetails-4d990c92.js:6:787 at Array.map (<anonymous>) at Proxy.initEventLoaded (OrderDetails-4d990c92.js:6:764) at Proxy.mounted (OrderDetails-4d990c92.js:6:1412) at index-bddb4464.js:1:34087 at nn (index-bddb4464.js:1:15467) at ht (index-bddb4464.js:1:15546) at e.__weh.e.__weh (index-bddb4464.js:1:33967) (anonymous) @ OrderDetails-4d990c92.js:6 (anonymous) @ OrderDetails-4d990c92.js:6 initEventLoaded @ OrderDetails-4d990c92.js:6 mounted @ OrderDetails-4d990c92.js:6 (anonymous) @ index-bddb4464.js:1 nn @ index-bddb4464.js:1 ht @ index-bddb4464.js:1 e.__weh.e.__weh @ index-bddb4464.js:1 Go @ index-bddb4464.js:1 ed @ index-bddb4464.js:1 Promise.then (async) initEventLoaded @ OrderDetails-4d990c92.js:6 mounted @ OrderDetails-4d990c92.js:6 (anonymous) @ index-bddb4464.js:1 nn @ index-bddb4464.js:1 ht @ index-bddb4464.js:1 e.__weh.e.__weh @ index-bddb4464.js:1 Go @ index-bddb4464.js:1 ed @ index-bddb4464.js:1 Promise.then (async) Zf @ index-bddb4464.js:1 mi @ index-bddb4464.js:1 (anonymous) @ index-bddb4464.js:1 Tc @ index-bddb4464.js:1 $a @ index-bddb4464.js:1 gi @ index-bddb4464.js:1 set value @ index-bddb4464.js:1 O.onUpdate:modelValue.c.<computed>.c.<computed> @ OrderDetails-4d990c92.js:6 (anonymous) @ index-bddb4464.js:1

Poor docs, how to add it as a component ?

How to use it inside Laravel VUE App ?
How to install it ?
How to use it in another component page ?

Many questions you should answer !!!

Put it on npm

Can you please put it on npm so that it is installable via npm. I'm using .vue file and including it in link and script tags as you have (demo/main.html) isn't working. It logs an error zoomOnHover is not defined

Optionally a separate zoom image

What is the way to zoom with the separate image?

Thanks