vue inner image zoom

Complete project of a Vue component for magnifying an image within its original container. The zoom behavior is triggered on click and the image can be moved by dragging on touch devices and by either dragging or hover panning on non-touch devices. The component supports responsive images and optional full screen zoom on mobile

Follow these steps to use vue inner image zoom



npm install vue-inner-image-zoom


yarn add vue-inner-image-zoom


Import the CSS from your node_modules directory using:

import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css';


Import the component and include in your template:

import InnerImageZoom from 'vue-inner-image-zoom';


export default {
  components: {
    'inner-image-zoom': InnerImageZoom


<inner-image-zoom src="/path/to/image.jpg" zoomSrc="/path/to/zoom-image.jpg" />


srcString(Required) URL for the original image.
srcSetStringDefault srcset attribute for a responsive original image.
sizesStringDefault sizes attribute for use with srcset.
sourcesArrayA list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
widthNumberWidth attribute for original image.
heightNumberHeight attribute for original image.
hasSpacerBooleanfalseIf true, gets the original image’s aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift.
zoomSrcStringURL for the larger zoom image. Falls back to original image src if not defined.
zoomScaleNumber1Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
zoomPreloadBooleanfalseIf set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.
altStringAlternative text for the original image.
moveTypeStringpanpan or drag. The user behavior for moving zoomed images on non-touch devices.
zoomTypeStringclickclick or hover. The user behavior for triggering zoom. When using hover, combine with zoomPreload to avoid flickering on rapid mouse movements.
fadeDurationNumber150Fade transition time in milliseconds. If zooming in on transparent images, set this to 0 for best results.
fullscreenOnMobileBooleanfalseEnables fullscreen zoomed image on touch devices below a specified breakpoint.
mobileBreakpointNumber640The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
hideCloseButtonBooleanfalseHides the close button on touch devices. If set to true, zoom out is triggered by tap.
hideHintBooleanfalseHides the magnifying glass hint.
classNameStringCustom classname for styling the component.
afterZoomInFunctionFunction to be called after zoom in.
afterZoomOutFunctionFunction to be called after zoom out.

Leave a Comment