@likecoin/vue-image-lightbox NPM

vue-image-lightbox

!!! Fork of https://github.com/pexea12/vue-image-lightbox, removing v-touch and swipe function.

##Original README 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)

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
...
Vue.use(VueLazyLoad)

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 Webpack

How 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

Contributors:

vue vuejs lightbox gallery image gallery image lightbox

vue-lazyload

@everything-registry/sub-chunk-548 @zalastax/nolb-_lik @infinitebrahmanuniverse/nolb-_lik

5.5.4

6 years ago

5.5.3

6 years ago