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

Responsive image zoom component for Vue.js 2, that also works on touch devices. Perfect for zooming on product images on an ecommerce website.

Works on hover(default) or click on mouse devices, tap to zoom on touch screens.

Performance and pageload is important, zoom images do not load until needed, so only the regular sized images load on pageload. Webp format also available with jpg/png backwards compatabilty for browsers that do not yet support webp.

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

Installation

npm i vue-image-zoomer

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 examples

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

<!-- png example -->
<image-zoom 
    regular="path-to-regular.png" 
    zoom="path-to-zoom.png">				
</image-zoom>

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

Options

The following props can be added to the html above

Property	Type	Default	Description
alt	String		Alt tag for regular image
click-zoom	Boolean	false	Click to zoom instead of hover to zoom which is default
click-message	String	⚲ Click to zoom	To change the message that appears on top of the image before you zoom when clickZoom is enabled, accepts html
hover-message	String	⚲ Hover to zoom	To change the message that appears on top of the image before you hover to zoom, accepts html
img-class	String		Class for regular image, e.g. 'img-fluid' in bootstrap
regular	String		Required Path to the regular image source
regular-webp	String		Path to the regular webp image source, regular option will default as backup if browser doesn't support webp
touch-message	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 source
zoom-amount	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 source
zoom-webp	String		Path to the zoom webp image source, zoom option will default as backup if browser doesn't support webp

License

This project is licensed under the MIT License