Home

Awesome

vue-images

npm version MIT Licence

A simple lightbox component for displaying an array of images

<br><img src="https://cloud.githubusercontent.com/assets/14028075/22059135/9a633f74-dda6-11e6-8314-3b745801b4e1.gif" width="70%" height="70%">

Feature

Demo & Examples

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

Start guide

// 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
  }
})
<script src="../node-modules/vue-images/dist/vue-images.js"></script>
new Vue({
  el: '#app',
  data () {
    return {
      images: [...],
      ...
    }
  },
  components: {
    vueImages: vueImages.default
  }
})

Options

PropertyTypeDefaultDescription
imagesarrayundefinedRequired. An array of objects containing valid src and srcset values of img element
modalclosebooltrueAllow users to exit the lightbox by clicking the backdrop
keyinputbooltrueSupports keyboard input - esc, ←, and →
mousescrollbooltrueSupports mouse scroll
showclosebuttonbooltrueOptionally display a close X button in top right corner
showcaptionbooltrueOptionally display a caption under the image
imagecountseparatorstring' of 'Custom separator for the image count
showimagecountbooltrueOptionally display image index, e.g., "3 of 20"
showthumbnailsboolfalseOptionally display thumbnails beneath the Lightbox

Change log