vue-image-lightbox
A simple image lightbox component for Vuejs
NPM Package
I use CSS style from react-images
Development (NPM / Yarn)
npm run dev
yarn dev
Install
NPM / Yarn
Install the package:
npm install vue-image-lightbox vue-lazyload vue-touch@next
yarn add vue-image-lightbox vue-lazyload vue-touch@next
Then import it in your project
At your entry point (main.js
normally)
...VueVue
and use the lightbox:
components: Lightbox
Browser global
Usage
You can simply view App.vue to see how to use vue-image-lightbox
Import CSS style
// Use only when you are using Webpack
How to use:
images
has the structure:
thumb: 'http://example.com/thumb.jpg' src: 'http://example.com/image.jpg' caption: 'caption to display. receive <html> <b>tag</b>' // Optional
Options
Properties
name | type | default | description |
---|---|---|---|
images | Array | required | Image array to display |
showLightBox | Boolean | true | Whether to show lightbox or not at the beginning |
startAt | Number | 0 | Index of the image that you want to start at |
nThumbs | Number | 7 | Number of thumnail images |
showThumbs | Boolean | true | Whether to show thumbnails or not |
autoPlay | Boolean | false | Move to next image automatically |
autoPlayTime | Number | 3000 (ms) | Time to stop at an image before move on to next image |
siteLoading | null | default image when your image is error or loading | |
showCaption | Boolean | false | Whether to show caption or not |
Methods
name | arguments | description |
---|---|---|
nextImage | () | Move to next image |
previousImage | () | Move to previous image |
closeLightBox | () | Close lightbox |
showImage | (index) | Show the image at index |
CREDITS
Most of the CSS belongs to react-images