v-img

Image viewer never been that easy to setup. 🌁

More examples

Browser support

Browser	Minimum version
Firefox (desktop)	❓
Chrome (desktop)	❓
Safari (desktop)	❓
Opera (desktop)	❓
Firefox (mobile)	❓
Chrome (mobile)	❓
Safari (mobile)	❓
Opera mini (mobile)	❓

Will be filled soon.

Getting started

1. Install plugin with yarn or npm

yarn add v-img

or

npm install v-img --save

2. Use plugin before creating Vue instance

import Vue from 'vue';
import VueImg from 'v-img';

Vue.use(VueImg);
new Vue({...})

3. Add v-img directive to the image

<img v-img src="...">

Available options

To open only one image don't specify any directive argument:

<img v-img src="...">

To specify groups of images (to be able to scroll around them when opened, show counter in top left corner) add similar argument to directives:

<img v-img:name src="...">
<img v-img:name src="...">

There are some available options we can specify as value of the directive:

<img v-img="{...}" src="...">

Option	Description	Default value
src	Source of image will be displayed	src attribute from html tag
cursor	Cursor when hovering original <img>	'pointer'

TODO 📝

• Preload all custom soruces of opened group
• Always show control bottons on mobiles
• Add tests