https://github.com/zeknoss/vue-magnifier
A simple VueJS component for image magnifying / product zooming
https://github.com/zeknoss/vue-magnifier
magnifier magnifying vue vue-magnifier vuejs vuejs-components vuejs2 zoom
Last synced: 2 months ago
JSON representation
A simple VueJS component for image magnifying / product zooming
- Host: GitHub
- URL: https://github.com/zeknoss/vue-magnifier
- Owner: zeknoss
- Created: 2018-07-22T18:52:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T14:39:02.000Z (almost 3 years ago)
- Last Synced: 2025-08-03T00:09:41.644Z (4 months ago)
- Topics: magnifier, magnifying, vue, vue-magnifier, vuejs, vuejs-components, vuejs2, zoom
- Language: Vue
- Homepage: https://codesandbox.io/s/github/zeknoss/vue-magnifier
- Size: 653 KB
- Stars: 61
- Watchers: 3
- Forks: 13
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-magnifier - A simple VueJS component for image magnifying / product zooming (UI Components [🔝](#readme))
- awesome-vue-zh - Vue,放大镜 - Vue.js 2.x的简单图像缩放/放大组件. (UI组件 / 杂)
- awesome-vue - vue-magnifier ★21 - A simple image zooming / magnifying component for Vue.js 2.x. (UI Components / Miscellaneous)
- awesome-vue - vue-magnifier - A simple image zooming / magnifying component for Vue.js 2.x. (Components & Libraries / UI Components)
- awesome-vue - vue-magnifier - A simple image zooming / magnifying component for Vue.js 2.x. (UI Components / Miscellaneous)
README
# Vue-Magnifier: a simple VueJS 2.x component
For a demo, please visit here: https://codepen.io/zeknoss/pen/vaxGKe
> Vue Magnifier is free component for basic image zoom practices.
> You can use it as follows:
``` html
To customize the look and feel of the component, just edit the vue component file, or the provided standalone vue-magnifier.scss or the vue-magnifier.css file.
```
## Load standalone from CDN
``` html
```
## Load standalone from local
``` html
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run all tests
npm test
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).