vue-images

Code and Docs on GitHub Star

Examples

Photos courtesy of Unsplash.

Support your keyboard to navigate left right esc. Support mouse scroll to navigate. Support mouse touch move to navigate.

Also, try resizing your browser window.

Getting Started

1. Import using module:

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

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

new Vue({
  el: '#demo',
  data () {
    return {
      images: [...],
      ...(other parameters)
    }
  },
  components: {
    vueImages: vueImages
  }
})

2. Import using script tag:

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

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

Options

Property	Type	Default	Description
images	array	undefined	Required. An array of objects containing valid src and srcset values of img element
modalclose	bool	true	Allow users to exit the lightbox by clicking the backdrop
keyinput	bool	true	Supports keyboard input - `esc`, `←`, and `→`
mousescroll	bool	true	Supports mouse scroll
showclosebutton	bool	true	Optionally display a close `X` button in top right corner
showcaption	bool	true	Optionally display a caption under the image
imagecountseparator	string	' of '	Custom separator for the image count
showimagecount	bool	true	Optionally display image index, e.g., "3 of 20"
showthumbnails	bool	false	Optionally display thumbnails beneath the Lightbox

Images

Property	Type	Default	Description
imageUrl	string	undefined	Required. The primary image path
caption	string	undefined	Displayed beneath the current image. Great for description or attribution

License

vue images is free to use for personal and commercial projects under the MIT license.

Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.

Help

Have a question?

Follow the quick start guide on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.

Found a bug?

If you find a bug, please read the Change Log before you report the issue.