vue-nfp-gallery

0.1.1 • Public • Published

FORK

This is a Fork from https://www.npmjs.com/package/vue-images

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:
// Install using npm
npm install vue-images --save
 
// Include stylesheet
require('vue-images/dist/vue-images.css')
 
// In ES6 module
import vueImages from 'vue-images'
  • Import using script tag:
<link rel="stylesheet" href="../node-modules/vue-images/dist/vue-images.css" charset="utf-8">
<script src="../node-modules/vue-images/dist/vue-images.js"></script>
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.3: Fix #2 & #3

Readme

Keywords

Package Sidebar

Install

npm i vue-nfp-gallery

Weekly Downloads

2

Version

0.1.1

License

MIT

Last publish

Collaborators

  • twitnic