vue-image-zoom

Purpose

This is a vue component that zooms in on an image when hovered, can be used in portfolios, gallery, and e-commerce application.

Example

Minimalistic example

<ImageZoom src="https://images.pexels.com/photos/4622893/pexels-photo-4622893.jpeg" />

Full fledged example

<template>
  <div id="app">
    <ImageZoom
      custom-class="my-custom-class"
      :scale="4"
      height="800px"
      width="800px"
      src="https://images.pexels.com/photos/4622893/pexels-photo-4622893.jpeg"
    />
  </div>
</template>

<script>
import ImageZoom from "@tabrezdn1/vue-image-zoom";

export default {
  components: {
    ImageZoom,
  },
};
</script>
<style scoped>
.my-custom-class {
  border-radius: 100px;
}
</style>

Props

There are currently the following props:

Prop	type	Description	Required	Default
src	String	This is the source url for the image	true	As it is required prop so - null
height	String	This prop is used to specify the height of the div where image will render. You can use it to specify custom height for the frame	false	500px
width	String	This prop is used to specify the width of the div where image will render. You can use it to specify custom width for the frame	false	500px
customClass	String	This is name of the class that you want to apply on the parent element of the component, for example a custom-class	false	''
scale	Number	This prop specifies the amount of zoom to be done. Consider it like zoom x. For Example if you pass 2, it will zoom 2x times that is twice.	false	2

Documentation

Coming soon...