vue-photo-gallery
A Vue.js 2.0 photo gallery based on PhotoSwipe (no extra dependencies)
You can use this photo gallery as component or plugin
Usage example as component
Control visibility of gallery by setting a variable to v-model. v-model will store current visible photo index, if set to null the gallery will close.
Template
Script
{ return images: src:"https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" thumbSrc: "https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" w: 1600 h: 1600 src: "https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" thumbSrc: "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" w: 1600 h: 1068 visiblePhoto: null ; };
Usage example as plugin
Control visibility of gallery by calling this.$photoGallery.open(index, this.images) and this.$photoGallery.close()
Template
Script
{ return images: src:"https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" thumbSrc: "https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" w: 1600 h: 1600 src: "https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" thumbSrc: "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" w: 1600 h: 1068 ; };
Installation
npm install vue-photo-gallery
vue-photo-gallery can be used as a module in both CommonJS and ES modular environments.
When in non-modular environment, vue-photo-gallery will register all the components to vue by itself.
ES6
//// You can register a component manually//; ... components: PhotoGallery ...; //// or register the whole module with vue, this will install component globally and will install photoGallery plugin.//; // Install this libraryVue;
CommonJS
//// You can register a component manually//var Vue = ;var VuePhotoGallery = ; var YourComponent = Vue; //// or register the whole module with vue//var Vue = ;var VuePhotoGallery = ; // Install this libraryVue;
Browser
<!-- Components are registered globally -->
After that, you can use it in your templates:
Changelog
See the GitHub release history.
Contributing
See CONTRIBUTING.md.
Generated using vue-cli-template-library.