lightgallery-vue

Introduction

vue wrapper of lightgallery.js

online demo

Start

1. Install

   $ npm install lightgallery-vue@latest
   

2. 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

   export default {
     data () {
       return {
         images: [{
           src: '1.jpg',
   		thumb:'2.jpg',
   		subHtml:'caption'
         }{
           src: '1.html',
   		thumb:'2.jpg',
   		subHtml:'',
   		iframe:true
         }]
       }
     }
   }
   

Attributes

Dynamic variables

Method

this.$refs.lightGallery.showImage(index);

More methods

Event

More events

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/

License

MIT