vue-zooming-image

A simple vue component to hold an image which will zoom towards the position of the cursor. Originally written to hold preview thumbnails in conjunction with a lightbox.

Demo

vue-zooming-image Demo

Installation via NPM

npm i vue-zooming-image

Usage

<template>
  <div id="app">
    <ZoomingImage 
      src="./image.png"
      width="375px"
      height="250px"> 
      <div>Overlay content</div>
    </ZoomingImage>
  </div>
</template>

<script>
import ZoomingImage from 'vue-zooming-image'

export default {
  name: 'App',
  components: {
    ZoomingImage
  }
}
</script>

Options

Props

Prop	Description
src	Path to the image to display
width	width of the image (in pixels)
height	height of the image (in pixels)

Slots

The component provides a single, unnamed slot as an overlay for the image.