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
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
![[Bug] After dynamically changing the values of regular and zoom, the enlarged image is not changed](https://avatars.githubusercontent.com/u/20255750?v=4)
2.1k Dec 27, 2022
0 Dec 3, 2020
3 Aug 9, 2022
2 Aug 7, 2022
327 Jan 1, 2023
2 Oct 11, 2021
31 Jul 6, 2022
60 Dec 7, 2022
21 Aug 13, 2022
2 Oct 3, 2021
3 Aug 30, 2022
0 Feb 1, 2020
92 Dec 9, 2022
1 Oct 15, 2019
26 Sep 19, 2022
266 Dec 23, 2022
5 Aug 19, 2021
864 Dec 9, 2022