Package Exports

vue-image-zoomer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-image-zoomer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Image Zoomer

Image zoom component for Vue.js, that also works on touch devices.

Demo: https://samueljon.es/vue-image-zoomer

Installation

npm i vue-image-zoom

Usage with Webpack or other module bundlers:

import Vue from 'vue';
import imageZoom from 'vue-image-zoomer'

new Vue({
    el: '#app',
    components:{
        imageZoom
    }
})

// or

const ImageZoom = require('vue-image-zoomer').default

Vue.component('image-zoom', ImageZoom)

Usage

<image-zoom 
    regular="path-to-regular.jpg" 
    zoom="path-to-zoom.jpg">				
</image-zoom>

Options

Property	Type	Default	Description
clickZoom	Boolean	false	Click to zoom instead of hover to zoom which is default
clickMessage	String	⚲ Click to zoom	To change the message that appears on top of the image before you zoom when clickZoom is enabled, accepts html
hoverMessage	String	⚲ Hover to zoom	To change the message that appears on top of the image before you hover to zoom, accepts html
imageAlt	String		Alt tag for regular image
imageClass	String		Class for regular image, e.g. 'img-fluid' in bootstrap
regular	String		Required Path to the regular image
regular_webp	String		Path to the regular webp image, regular option will default as backup if browser doesn't support webp
touchMessage	String	⚲ Tap to zoom	To change the message that appears on top of the image before you tap to zoom on a touch screen, accepts html
zoom	String		Required Path to the zoom image
zoomAmount	Number		Amount you want the zoom image to zoom by e.g. '2' would be 2 times as large as the regular image's dom size. Zoom is defaulted to be the size of the zoom image
zoom_webp	String		Path to the zoom webp image, zoom option will default as backup if browser doesn't support webp

License

This project is licensed under the MIT License