Simple Lightbox Component For Vue

Simple Lightbox Component For Vue

A lightweight, easy-to-use image lightbox component for Vue.js.

vue-lightbox

Simple lightbox component for vue

How to use it

Example on jsbin

# import 
import VueLightbox from 'vue-lightbox'
Vue.component("Lightbox",VueLightbox)

or

var VueLightbox = required('./vue-lightbox.js') 
or
<script type="text/javascript" src="./vue-lightbox.js"></script>
Vue.component("Lightbox",VueLightbox.VueLightbox)




# use
# some album pictures will be grouped
<lightbox src="http://pic1.jpg" caption="this is pic caption" album="albumA"></lightbox>
<lightbox src="http://pic2.jpg" caption="this is pic caption" album="albumA"></lightbox>
<lightbox src="http://pic3.jpg" caption="this is pic caption" album="albumB"></lightbox>


Options

prop type required default desc
src String yes picture url
album String no "" group of pictures
caption String no "" some picture desc will display under the popup
show-index Boolean no true show the picture number index
index-tmpl String no "${d} of ${total} images" picture number index tmpl,${d} will be replace by index,${total} will be album's picture count
click-overlay-hide Boolean no true is click to close lightbox

Todo

  • add watch when props change

  • test for different browser

Github Repository

Tags: #VueJs