demo JavaScript
Need help with vue-images?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
littlewin-wang

Description

:lollipop: A simple lightbox component for displaying an array of images

213 Stars 51 Forks MIT License 69 Commits 14 Opened issues

Services available

Need anything else?

vue-images

npm version MIT Licence

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: ``` bash // 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:
html ```
new Vue({
  el: '#app',
  data () {
    return {
      images: [...],
      ...
    }
  },
  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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.