Vuejs-Vue zoom on hover: vue-zoom-on-hover - Image zoom on mouse hover

vue-zoom-on-hover

responsive image with zoomed image on hover.

example image

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

Comments

  • Support for touch devices
    Support for touch devices

    Sep 28, 2019

    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

    enhancement 
    Reply
  • Zoomed image displayed to the side of original image
    Zoomed image displayed to the side of original image

    Feb 27, 2020

    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...

    enhancement 
    Reply
  • Not in Safari?
    Not in Safari?

    Nov 8, 2021

    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

    Reply
  • Consolidated files to SFC, improved naming conventions
    Consolidated files to SFC, improved naming conventions

    Jan 12, 2022

    ES6 conversion, Vue SFC, changed naming conventions to be more clear, vuified some things that were vanilla js

    Reply
  • Add support of the `alt` attribute
    Add support of the `alt` attribute

    Sep 9, 2020

                                                                                                                                                                                                           
    Reply
  • Replace double quotes concatenation with template literals
    Replace double quotes concatenation with template literals

    Aug 5, 2019

    Template literals are easy for reading and can handle multi-line strings well instead of escaping and concatenating double quotes.

    Reply
  • My strange situation with max-width: 100%
    My strange situation with max-width: 100%

    Dec 26, 2019

    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. ))

    Reply
  • This is setting styles directly and manually
    This is setting styles directly and manually

    Sep 12, 2019

    https://github.com/Intera/vue-zoom-on-hover/blob/b22bf28523b6b42a4d482ca7f9467ef2759394b4/zoomOnHover.js#L35

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

    Reply
  • Put it on npm
    Put it on npm

    Aug 27, 2018

    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

    Reply
  • Optionally a separate zoom image
    Optionally a separate zoom image

    Jun 4, 2018

    What is the way to zoom with the separate image?

    Thanks

    Reply
  • Poor docs, how to add it as a component ?
    Poor docs, how to add it as a component ?

    Sep 10, 2019

    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 !!!

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

    Feb 23, 2020

    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

    question 
    Reply