0.2.0 • Published 6 years ago
mue-gallery v0.2.0
mue-gallery
A Vue.js images gallery.
Installation
# npm
npm install mue-gallery
# yarn
yarn add mue-gallery
Usage
import Vue from 'vue';
import MueGallery from 'mue-gallery';
Vue.use(MueGallery);
In your component:
<mue-gallery
:images="images"
/>
Options
Property | Default | Type | Description |
---|---|---|---|
v-model | false | Boolean | Controls if gallery pop-up is open or not |
images | [] | Array | Your images list |
index | undefined | Number | Current displayed image |
embed | false | Boolean | Set true to embed gallery into your page. If true , v-model is not needed |
thumbs | true | Boolean | Set true to show thumbnails |
thumbs-position | 'bottom' | String | Thumbnails position. Possible values: top , right , bottom , left |
background | '#333' | String | The background color. Any value, supported by CSS background-color |
blur | false | Boolean | Set true to add a half-transparent blurred version of current image to the background |
nav | true | Boolean | Set true to show navigation arrows |
caption | true | Boolean | Set true to show current image title |
counter | true | Boolean | Set true to show images counter |
zoom | false | Boolean | Set true to allow images zoom |
images
Possible data formats:
[
'image_1.jpg',
...
]
[
{
src: 'image_1.jpg', // Full-size image path, required
thumb: 'image_1_thumb.jpg', // Thumbnail path, optional
title: 'Image 1', // Image title, optional
},
...
]
License
mue-gallery is MIT licensed.