An image viewer base on Vue.js for mobile
🙆♀️ Easy to use
👉 Swipe gesture
🔍 Zoom gesture
V0.11.0 Now you can use thumbnail~
V0.13.0 Gallery hide when the physical back button is pressed (android device only)
V0.15.0 Fix blurry after using scale()
Please Use Mobile Browser 😆
or scan the QRcode
npm i img-vuer --save
// import img-vuer and install
import gallery from 'img-vuer'
Vue.use(gallery, {
swipeThreshold: 150 // default 100 ,new in 0.12.0
})
<!-- add direact to <img> -->
<img v-gallery :src="...">
<!-- group images -->
<img v-gallery:groupName :src="...">
<img v-gallery:groupName :src="...">
<img v-gallery:groupName :src="...">
<!-- OR ( dynamic bind ) -->
<img v-gallery="'groupName'" :src="...">
<!-- use thumbnail, new in 0.11.0 -->
<img v-gallery :src="thumbnailSrc" data-large="originSrc">
<!-- trigger close gallery, new in 0.14.0 -->
<button @click="$imgVuer.close()">close</button>
# development environment node v6.15.1
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Add meta
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1">
MIT