npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-image-zoomer

v2.4.3

Published

Repsonsive image zoom component for Vue.js 3, that also works on touch devices. Legacy versions available for Vue 2.

Downloads

33,053

Readme

Vue Image Zoomer

Lightweight responsive image zoom component for Vue.js 3 & 2, that also works on touch devices. Perfect for zooming on product images on an ecommerce website. For Vue 2 please check out the legacy version https://www.npmjs.com/package/vue-image-zoomer/v/legacy.

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:

//global
import { createApp } from 'vue';
import App from './App.vue'
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

const app = createApp(App);

app.use(VueImageZoomer);

app.mount('#app');

//in component
import { VueImageZoomer } from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

export default {
  name: 'App',
  components: {
    VueImageZoomer
  }
}

Also comes with a UMD version and css file if not using a module compiler in the dist folder.

Usage examples

<!-- Example without zoom image -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" />

<!-- jpg example -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg" />

<!-- png example -->
<vue-image-zoomer 
	regular="path-to-regular.png" 
	zoom="path-to-zoom.png" />

<!-- webp example -->
<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	regular-webp="path-to-regular.webp"
	zoom="path-to-zoom.jpg"
	zoom-webp="path-to-zoom.webp" />

Placeholder

Placeholder slot, helps with CLS improvements & page jumping.

<vue-image-zoomer 
	regular="path-to-regular.jpg" 
	zoom="path-to-zoom.jpg">
	<img src="path-to-low-res-placeholder.jpg" />
</vue-image-zoomer>

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

<vue-image-zoomer 
	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'
		}						
	]" />

<!-- webp example -->
<vue-image-zoomer 
	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'
		}						
	]" />

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| | img-height | Number | | img height attribute for improved lighthouse performance | | img-width | Number | | img width attribute for improved lighthouse performance | | lazyload | Boolean | false | To lazyload the regular image, uses HTML loading attribute | | 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| | right-click | Boolean | true | Set to false to disable right click on images (stop easy image stealing) | | 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 | | tap-to-close | Boolean | false | Set to true to tap to close zoom on mobile, instead of the close button | | 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| | touch-zoom-pos | Array | [0.5, 0.5] | X & Y position from top left of where the zoom starts on touch devices e.g. [0.5, 0.5] the default, is center, [0, 0] is top left. Max value is 1, min value is 0. | | 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|

Events

The events that the component emits.

| Event | Description| |:----------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | regular-loaded | Fires when the regular image has loaded on page| | off-zoom | Fires when you are not zooming | | on-zoom | Fires when you are zooming | | zoom-loaded | Fires when the zoom image has loaded| | zoom-loading | Fires when the zoom image is loading|

License

This project is licensed under the MIT License