All Projects → ssshooter → Img Vuer

ssshooter / Img Vuer

Licence: mit
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

Projects that are alternatives of or similar to Img Vuer

React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: ✭ 502 (+105.74%)
Mutual labels:  image, image-gallery
Picker
Picker - A CameraX based WhatsApp Style Image-Video Picker
Stars: ✭ 69 (-71.72%)
Mutual labels:  image, image-gallery
Gis
gis (go image server) go 实现的图片服务,实现基本的上传,下载,存储,按比例裁剪等功能
Stars: ✭ 108 (-55.74%)
Mutual labels:  image, image-gallery
Dualgan
DualGAN-tensorflow: tensorflow implementation of DualGAN
Stars: ✭ 230 (-5.74%)
Mutual labels:  image
Shadowimageview
🔥可以根据图片内容变阴影颜色,更加细腻的阴影效果 It can change color according to the picture, more delicate shadow effect
Stars: ✭ 2,560 (+949.18%)
Mutual labels:  image
Vscode Paste Image
paste image from clipboard to markdown/asciidoc directly!
Stars: ✭ 236 (-3.28%)
Mutual labels:  image
Poly Flif
📷 A poly-fill for the FLIF image format.
Stars: ✭ 243 (-0.41%)
Mutual labels:  image
Slideimageview
Simple and convenient library that allows you to slide images through a view.
Stars: ✭ 227 (-6.97%)
Mutual labels:  image
Python Barcode
㊙️ Create standard barcodes with Python. No external dependencies. 100% Organic Python.
Stars: ✭ 241 (-1.23%)
Mutual labels:  image
Nexus Cli
Nexus CLI for Docker Registry v2 🐳
Stars: ✭ 236 (-3.28%)
Mutual labels:  image
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+1107.38%)
Mutual labels:  image-gallery
Sjnetwork
SJNetwork is a high level network request tool based on AFNetworking and inspired on YTKNetwork.
Stars: ✭ 231 (-5.33%)
Mutual labels:  image
Ultimatepp
U++ is a C++ cross-platform rapid application development framework focused on programmer's productivity. It includes a set of libraries (GUI, SQL, Network etc.), and integrated development environment (TheIDE).
Stars: ✭ 237 (-2.87%)
Mutual labels:  image
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+1047.13%)
Mutual labels:  image
Imageocr
PHP验证码识别[PHP CAPTCHA Recognition]
Stars: ✭ 241 (-1.23%)
Mutual labels:  image
Photofilters
photofilters library for flutter
Stars: ✭ 229 (-6.15%)
Mutual labels:  image
Imagecli
A command line image processing tool
Stars: ✭ 242 (-0.82%)
Mutual labels:  image
Terminal Image Cli
Display images in the terminal
Stars: ✭ 234 (-4.1%)
Mutual labels:  image
Imagecow
PHP library to manipulate and generate responsive images
Stars: ✭ 234 (-4.1%)
Mutual labels:  image
Box
A mruby-based Builder for Docker Images
Stars: ✭ 236 (-3.28%)
Mutual labels:  image

img-vuer

An Mobile-First image viewer for Vue2

中文 README


🙆 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()

💻 v0.17.1 compatible with PC

Now you can use both Mobile and PC Browser 😆

live demo

or scan the QRcode

Install

npm i img-vuer --save

Usage

// import img-vuer and install
import gallery from 'img-vuer'
Vue.use(gallery, {
  swipeThreshold: 150, // default 100
  isIndexShow: true, // show image index, default true
  useCloseButton: true, // trigger gallery close with close button, default true
  preload: true, // preload images in the same group, default true
  sliderBackgroundColor: 'rgba(0,0,0,0.6)',
  sliderZIndex: 1001,
})
<!-- 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>

API

api arg description
close() / close the viwer
onIndexChange() cb $imgVuer.onIndexChange((newVal, oldVal)=>{...})
onToggle() cb on close or on open $imgVuer.onToggle((newVal, oldVal)=>{...})
changeBGColor() color change the background color of viwer $imgVuer.changeBGColor('#fff')
next() / switch to next image $imgVuer.next()
prev() / switch to previous image $imgVuer.prev()
getCurrentIndex() / /

Development

# 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

Troubleshooting

Abnormal with page scale

Add meta

<meta
  name="viewport"
  content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1"
/>

for a large number of large images

If you group a large number of large images, img-vuer will load all image in the same group, so it will cause unnecessary mobile data traffic and slow the page down.

You can use preload option in this situation and img-vuer will only load the image you watched.

key

Should not use index as key for the component which is added v-gallery.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].