vue-images

A simple lightbox component for displaying an array of images

Feature

• Mobile friendly

• Thumbnail navigation

• Responsive design

Demo & Examples

Live demo: https://littlewin-wang.github.io/vue-images/example

Start guide

• Import using module:

// Install using npm
npm install vue-images --save

// In ES6 module
import vueImages from 'vue-images'

// Use module as component
new Vue({
  el: '#app',
  data () {
    return {
      images: [...],
      ...
    }
  },
  components: {
    vueImages: vueImages
  }
})

• Import using script tag:

<script src="../node-modules/vue-images/dist/vue-images.js"></script>

new Vue({
  el: '#app',
  data () {
    return {
      images: [...],
      ...
    }
  },
  components: {
    vueImages: vueImages.default
  }
})

Options

Change log

• 1.0.0: Init file structure -> npm publish
• 1.0.1: Fix some bug when display in example page
• 1.0.2: Add basic config options
• 1.0.3: Add full screen and autoplay handle
• 1.0.4: Fix #2 & #3
• 1.0.5: Package css,js to single js file
• 1.0.6: fix #6
• 1.0.7: Fix #8
• 1.0.8: Fix #9 (add html parser in the caption & add flex-wrap to the gallery)
• 1.0.9: Add 'main' in package.json
• 1.0.10: Fix #17 & #14
• 1.1.0: Add transition & debounce strategy