Inner Image Zoom is a Vue component for enlarging the image inside the parent container. Zoom behavior is triggered on click and the image can be moved by dragging on touch devices and by dragging or moving the mouse over non-touch devices. The component supports responsive images and optional full-screen zoom on mobile.
inner zoom image jquery, vue inner image zoom example, js image zoom, vue image carousel with zoom, vue medium image zoom
Note: Version 2.0.0 upgrades the component to support Vue 3. To use this package with older versions of Vue, install using
npm install [email protected]oryarn add [email protected]instead of the instructions below.
How to make use of it:
Install and download:
# Yarn $ yarn add vue-inner-image-zoom # NPM $ npm i vue-inner-image-zoom
1. Import and register the component.
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'; import InnerImageZoom from 'vue-inner-image-zoom';
export default {
components: {
'inner-image-zoom': InnerImageZoom
}
}2. Add the internal image zoom component to the template and specify the path to the original images/preview images.
<inner-image-zoom src="/path/to/image.jpg" zoomSrc="/path/to/zoom-image.jpg" />
3. Component props available for configuring zoom in/out behavior.
moveType: {
type: String,
default: 'pan' // or 'drag'
},
zoomType: {
type: String,
default: 'click'
},
src: {
type: String,
required: true
},
srcSet: String,
sizes: String,
sources: Array,
width: Number,
height: Number,
hasSpacer: Boolean,
zoomSrc: String,
zoomScale: {
type: Number,
default: 1
},
zoomPreload: Boolean,
alt: String,
fadeDuration: {
type: Number,
default: 150
},
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
type: Number,
default: 640
},
hideHint: Boolean,
hideCloseButton: Boolean,
className: String,
afterZoomIn: Function,
afterZoomOut: FunctionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| src | String | (Required) URL for the original image. | |
| srcSet | String | Default srcset attribute for a responsive original image. | |
| sizes | String | Default sizes attribute for use with srcset. | |
| sources | Array | A list of image sources for using the picture tag to serve the appropriate original image (see below for more details). | |
| width | Number | Width attribute for the original image. | |
| height | Number | Height attribute for the original image. | |
| hasSpacer | Boolean | false | If true, gets the original image’s aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift. |
| zoomSrc | String | URL for the larger zoom image. Falls back to the original image src if not defined. | |
| zoomScale | Number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (for example, 0.9 for 90%). |
| zoomPreload | Boolean | false | If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave. |
| alt | String | Alternative text for the original image. | |
| moveType | String | pan | pan or drag. The user behavior for moving zoomed images on non-touch devices. |
| zoomType | String | click | click or hover. The user behavior for triggering zoom. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements. |
| fadeDuration | Number | 150 | Fade transition time in milliseconds. If zooming in on transparent images set this to 0 for best results. |
| fullscreenOnMobile | Boolean | false | Enables fullscreen zoomed image on touch devices below a specified breakpoint. |
| mobileBreakpoint | Number | 640 | The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true. |
| hideCloseButton | Boolean | false | Hides the close button on touch devices. If set to true, zoom out is triggered by tap. |
| hideHint | Boolean | false | Hides the magnifying glass hint. |
| className | String | Custom classname for styling the component. | |
| afterZoomIn | Function | Function to be called after zoom-in. | |
| afterZoomOut | Function | Function to be called after zoom out. |
Vue Inner Image Zoom Component, vue inner image zoom Plugin/Github, image zoom plugin
See Demo And Download
Official Website(laurenashpole): Click Here
This superior jQuery/javascript plugin is developed by laurenashpole. For extra Advanced Usage, please go to the official website.
