0.0.2 • Published 5 years ago
lightgallery-vue v0.0.2
Introduction
vue wrapper of lightgallery.js
Start
Install
$ npm install lightgallery-vue@latest
Usage
Step 1. Add lightgallery-vue component
import lightGallery from 'lightGallery-vue'; export default { components:{ lightGallery } }
Step 2. Use in template
<lightGallery :images="modalGallerys" ref="lightGallery"> </lightGallery>
with multi add id prop
<lightGallery id="lightGallery2" :images="modalGallerys" ref="lightGallery"> </lightGallery>
Step 3. Config for lightGallery
```js
export default {
data () {
return {
images: [{
src: '1.jpg',
thumb:'2.jpg',
subHtml:'caption'
}{
src: '1.html',
thumb:'2.jpg',
subHtml:'',
iframe:true
}]
}
}
}
```
Attributes
Method
this.$refs.lightGallery.showImage(index);
Event
Plugins
lightgallery supports your custom plugins for more content viewing plugins
import lightGallery from 'lightGallery-vue';
import 'lg-zoom.js';
import 'lg-fullscreen.js';
import 'lg-thumbnail.js';
import 'lg-autoplay.js';
Demo
$ git clone git@github.com:zengde/vue-lightgallery.git
$ cd vue-lightgallery
$ npm install
$ npm run dev
please visit http://localhost:8080/