v-img

Image gallery has never been that easy to setup. 🌁

More examples

Browser support

Browser	Minimum version
Firefox (desktop)	32
Chrome (desktop)	44
Safari (desktop)	9.1
Opera (desktop)	32
Firefox (mobile)	✅
Chrome (mobile)	✅
Safari (mobile)	✅

Browser support is one of the most important things of any javascript tool. Improving browser support with BrowserStack is the most convenient way to do it. Thanks them for supporting this particular project and open source at all.

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