A Vue Component For Magnifying An Inner Image Zoom Plugin

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] or yarn 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 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.

  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: Function


srcString (Required) URL for the original image.
srcSetString Default srcset attribute for a responsive original image.
sizesString Default sizes attribute for use with srcset.
sourcesArray A list of image sources for using the picture tag to serve the appropriate original image (see below for more details).
widthNumber Width attribute for the original image.
heightNumber Height attribute for the 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.
zoomSrcString URL for the larger zoom image. Falls back to the original image src if not defined.
zoomScaleNumber1Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (for 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.
altString Alternative 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.
classNameString Custom classname for styling the component.
afterZoomInFunction Function to be called after zoom-in.
afterZoomOutFunction 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.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *