Lightweight responsive image zoom component for Vue.js 2

Overview

Vue Image Zoomer

Lightweight 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. There is also an option to lazyload the regular image and breakpoints to have different res images on different screen sizes.

Zoom source is not needed but recommended for a sharper zoom, if there is no zoom image selected then the regular image will be zoomed by 2 by default.

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

Buy Me A Coffee

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

">

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


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


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


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

Carousel/Slider

Tested & works very well with Vue Carousel. Untested on others.

Lazy Loading

The zoom images automatically lazy loads when they activated. The Lazysizes package is used if you want to lazyload the regular image. 'lazyload-placeholder' is optional when lazyloading. Lazysizes package comes with this package.

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

new Vue({
    el: '#app',
    components:{
    	imageZoom
    }
});
">
<image-zoom 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg" 
	:lazyload="true"
	lazyload-placeholder="path-to-placeholder.jpg">				
image-zoom>

Breakpoints

This option is an array of objects that allows you to have different images on different screen sizes. For example to load a higher res image on desktop.

Order of the objects must start from highest min width, e.g. in the example below we start with the 1200 min width then 992. This is the min width of the browser in pixels when that breakpoint will show.

Like without breakpoints, if using breakpoints, the zoom parameters aren't required but recommended for a higher quality zoom image, width and regular parameters are required. Addition parameters to the array are 'regularWebp' and 'zoomWebp' if using webp images(will be defaulted to standard if browser does not support webp).

">
<image-zoom 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg"
	:breakpoints="[
		{
			width: 1200,
			regular: 'path-to-regular-1200.jpg',
			zoom: 'path-to-zoom-1200.jpg'
		},
		{
			width: 992,
			regular: 'path-to-regular-992.jpg',
			zoom: 'path-to-zoom-992.jpg'
		}						
	]">				
image-zoom>


<image-zoom 
	regular="path-to-regular.jpg" 
	regular-webp="path-to-regular.webp" 
	zoom="path-to-zoom.jpg"
	zoom-webp="path-to-zoom.webp" 
	:breakpoints="[
		{
			width: 1200,
			regular: 'path-to-regular-1200.jpg',
			regularWebp: 'path-to-regular-1200.webp',
			zoom: 'path-to-zoom-1200.jpg'
			zoomWebp: 'path-to-zoom-1200.webp'
		},
		{
			width: 992,
			regular: 'path-to-regular-992.jpg',
			regularWebp: 'path-to-regular-992.webp',
			zoom: 'path-to-zoom-992.jpg'
			zoomWebp: 'path-to-zoom-992.webp'
		}						
	]">				
image-zoom>

All Options

The following props can be added to the html above

Property Type Default Description
alt String Alt tag for regular image
breakpoints Array Array of objects that allows you to have different images on different screen sizes. Example is shown above, width and regular parameters are needed when using this, adition optional parameters are; regularWebp, zoom, zoomWebp
close-pos String top-left Position of the close button on mobile: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center
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 click-zoom is set to true, 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
lazyload Boolean false To lazyload the regular image, you need to import lazysizes for this to work
lazyload-placeholder String If you want a placeholder image when using lazyload
message-pos String bottom Position of the message that appears on top of the image before you zoom: top, bottom
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
show-message Boolean true Set to false to hide zoom message on non-touch devices
show-message-touch Boolean true Set to false to hide zoom message on touch devices
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 Regular image Recommended Path to the zoom image source. If zoom not selected then will use the regular image times by 2.
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, if there is not zoom image source then default zoom is 2
zoom-webp String Path to the zoom webp image source, zoom option will default as backup if browser doesn't support webp. zoom-webp will be regular-webp image if nothing is selected for zoom-webp, but there's a regular-webp image

License

This project is licensed under the MIT License

Comments
  • ReferenceError: window is not defined

    ReferenceError: window is not defined

    I am trying to use this plugin with one of our NuxtJS project. After following the instruction provided by the Nuxt Plugin guide. But after several different attempts, I was unable to use this plugin in the project. Was getting this error in my continuous attempts:

    ReferenceError: window is not defined
    
    opened by choyan 4
  • [Bug] After dynamically changing the values of regular and zoom, the enlarged image is not changed

    [Bug] After dynamically changing the values of regular and zoom, the enlarged image is not changed

    Related code

    <div class="zoom-box">
        <image-zoom :click-zoom="true" img-class="zoom-img" :zoom-amount="3"
                    :regular="thisImgSrc"
                    :zoom="thisImgSrc"
        ></image-zoom>
    </div>
    

    A sample application

    https://codesandbox.io/s/inspiring-christian-0p15s?file=/src/components/HelloWorld.vue

    Steps to reproduce

    1. Click the change url button image
    2. The image shown has changed image
    3. Move the mouse into the image, the enlarged image has not changed image
    opened by angelofan 4
  • Error importing the component

    Error importing the component

    import imageZoom from 'vue-image-zoomer';

    When i try to import the component i get:

    Could not find a declaration file for module 'vue-image-zoomer'. '/Applications/XAMPP/xamppfiles/htdocs/AM/node_modules/vue-image-zoomer/dist/vueImageZoom.js' implicitly has an 'any' type.

    opened by wealthyboy 3
  • Tailwindcss breaks zoom feature of VueImageZoomer (tested with Nuxt 3)

    Tailwindcss breaks zoom feature of VueImageZoomer (tested with Nuxt 3)

    See here https://stackblitz.com/edit/nuxt-starter-bagzmx?file=app.vue

    Nuxt 3 v3.0.0-rc.11 @nuxtjs/tailwindcss v5.3.5

    Zoom feature is broken, zoomed image size is incorrectly rendered..

    opened by minstn 2
  • Component VueImageZoomer.vue is failing to load if used in Nuxt 3

    Component VueImageZoomer.vue is failing to load if used in Nuxt 3

    See https://stackblitz.com/edit/nuxt-starter-bagzmx?file=components/VueImageZoomer.client.vue

    Nuxt 3 3.0.0-rc.11

    Looks like calls to this.$refs['vue-hover-zs'] in mounted hook are null

    I know this is more of a feature request, but would be amazing to have this fixed!

    opened by minstn 2
  • Origin parameter on mobile at init

    Origin parameter on mobile at init

    Hello, I'm facing a user case that require I think a new parameter. On mobile when I touch an image, the zoomed image show up as expected with the originX and originY at zero, if the zoomed image has a lot of white on the edge it only display a big white square and the web user may think it is a bug. It would be very nice to have a parameter to define the origin on mobile ( top-left, top-center, center ... ) What do you think ? I would love to submit a PR but there is no /src Thank you

    opened by wearemetabolism 2
  • No hover default message

    No hover default message

    Hi Sam,

    is it possible not to have any message with the hover option? Neither a default nor a custom message? I'm asking because I tried to set an empty string with the "hover-message" property but the zoomer still displays the grey background. Put another way, is it possible not to have the grey background when the "hover-message" property is set to an empty string? Thanks

    opened by mafrego 2
  • PNG images compatibility

    PNG images compatibility

    Hi! Thanx for this plugin. Using it on my Vue JS project. ISSUE: I have issue with PNG images. When i click to zoom png image, original image stays on background, so user can see 2 layers of image when mouse moving (regular and zoomed)

    image

    Wanted: Regular image dissapears OR zoomed image filled by background color

    opened by jakemake 2
  • property 'getBoundingClientRect' of undefined

    property 'getBoundingClientRect' of undefined"

    The component doesn't seem to find the reference to to use the "getBoundingClientRect" function

    [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'getBoundingClientRect' of undefined"
    
    found in
    
    ---> <ImageZoom>
           <ImageViewer> at src/components/panel/conversation/messages/messages/ImageViewer.vue
    

    image

    opened by valdinei 1
  • regular image size property

    regular image size property

    Hi Sam,

    would it be possible to add a property to insert the regular image size (height/width) so that browsers can calculate the actual height BEFORE the image is loaded. This avoid that the content jumps as soon as the images is loaded. https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images

    Thanks!

    opened by mafrego 1
  • message-position remains at the bottom

    message-position remains at the bottom

    Hi Sam,

    thanks for the new props. Is "message-position" prop supposed to work on desktop/laptop or mobile browsers? I'm asking because I've just tested "message-position" both on computer browsers (Firefox, Chrome) and on mobile (Samsung, iphone, Nexus, etc.) browsers (Chrome, Firefox, Safari) and it doesn't work: the message position remains at the bottom even if the position is set to top. Thanks!

    opened by mafrego 1
Releases(1.3.0)
Owner
Sam Jones
Sam Jones
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

mirari 2.1k Dec 27, 2022
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

hua chen yu 0 Dec 3, 2020
🔍 Vue image zoom component

vue-magnifier This is a Vue 3 adaptation of react-magnifier, which is the original version. Someone else made a Svelte version, called svelte-magnifie

Website Beaver 3 Aug 9, 2022
Image viewer component for vue 3.x, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js v-viewer for vue2 Live demo Quick Example direct

mirari 14 Oct 29, 2022
Vue Prettybox - a tool dependency that allows you to open or zoom image just by click it

Vue Prettybox - a tool dependency that allows you to open or zoom image just by click it. It helps you to view the image to have a better look of it without making zoom in on your browser.

Israel De Castro A. 2 Aug 7, 2022
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Lucas Pulliese 327 Jan 1, 2023
vue zoom component

vue zoom component

Alexander Vysotsky 2 Oct 11, 2021
KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever!

KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever! Simply enter a meeting room ID and connect to anyone else in that room! You can even share your screen if you are on desktop!

fotiecodes 31 Jul 6, 2022
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한국어 Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 60 Dec 7, 2022
🌈 A Vue image component. Simple realization of image shadow.

?? vue-image-shadow A Vue image component. Simple realization of image shadow. ?? Example Online: https://image-component.github.io/vue-image-shadow/

null 21 Aug 13, 2022
Lightweight and simple image gallery component for Vue.js

vue-image-box Description Lightweight and simple-ish image gallery component for Vue.js. Images can also be cycled through using the left & right arro

Adam Romig 2 Oct 3, 2021
A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on.

Mervin 3 Aug 30, 2022
Vue-image-loader: image loader for vue js with prevue

Vue-image-loader: image loader for vue js with prevue

null 0 Feb 1, 2020
vue-image-markup will provide you to edit uploaded image easily and save it.

Markup Image with Vue.js (customizable) vue-image-markup will provide you to edit uploaded image easily and save it. Installation npm i vue-image-mark

Lionix 92 Dec 9, 2022
A Directive for setting fall back image in a vue js application if in case image is not loaded

vue-fall-back-image-directive A Directive for setting fall back image in a vue js application. Installation npm install Run npm install --save vue-fal

Arun sivan 1 Oct 15, 2019
🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

Komo 26 Sep 19, 2022
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Willy Hong 266 Dec 23, 2022
🌉 Vue Image Placeholder component

Vue Image Placeholder ?? Multiservice Image Placeholder Vue component Installation yarn add vue-image-placeholder Use it in your app import ImagePlace

Andrea Stagi 5 Aug 19, 2021
A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

Alex Jover 864 Dec 9, 2022