vue-image-lightbox-b1
v5.6.2
Published
A Vue.js package to display an image gallery lightbox
Downloads
3
Maintainers
mrborekReadme
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 devInstall
NPM / Yarn
Install the package:
npm install vue-image-lightbox vue-lazyload vue-touch@next
yarn add vue-image-lightbox vue-lazyload vue-touch@nextThen import it in your project
At your entry point (main.js normally)
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
import VueTouch from 'vue-touch'
...
Vue.use(VueLazyLoad)
Vue.use(VueTouch, { name: 'v-touch' })and use the lightbox:
import Lightbox from 'vue-image-lightbox'
export default {
components: {
Lightbox,
},
}Browser global
<script src="path/to/vue.js"></script>
<script src="path/to/dist/vue-image-lightbox.js"></script>Usage
You can simply view App.vue to see how to use vue-image-lightbox
Import CSS style
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
// Use only when you are using WebpackHow to use:
<lightbox :images="images"></lightbox>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
Methods
CREDITS
Most of the CSS belongs to react-images