vue-photo-gallery

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

<photo-gallery :images="images" v-model="visiblePhoto"></photo-gallery>
<a v-for="(image, index) in images" class="thumb-item" href="#" @click="visiblePhoto = index">
  <img :src="https://raw.githubusercontent.com/DroneMapp/vue-photo-gallery/HEAD/image.thumbSrc"/>
</a>

Script

export default {
  data() {
    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

<a v-for="(image, index) in images" class="thumb-item" href="#" @click="this.$photoGallery.open(index, this.images)">
  <img :src="https://raw.githubusercontent.com/DroneMapp/vue-photo-gallery/HEAD/image.thumbSrc"/>
</a>

Script

export default {
  data() {
    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
//
import { PhotoGallery } from 'vue-photo-gallery';

export default {
  ...
  components: {
    PhotoGallery
  },
  ...
};

//
// or register the whole module with vue, this will install component globally and will install photoGallery plugin.
//
import VuePhotoGallery from 'vue-photo-gallery';

// Install this library
Vue.use(VuePhotoGallery);

CommonJS

//
// You can register a component manually
//
var Vue = require('vue');
var VuePhotoGallery = require('vue-photo-gallery');

var YourComponent = Vue.extend({
  ...
  components: {
    'photo-gallery': VuePhotoGallery.PhotoGallery
  },
  ...
});

//
// or register the whole module with vue
//
var Vue = require('vue');
var VuePhotoGallery = require('vue-photo-gallery');

// Install this library
Vue.use(VuePhotoGallery);

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-photo-gallery/dist/vue-photo-gallery.min.js"></script>
<!-- Components are registered globally -->

After that, you can use it in your templates:

<photo-gallery></photo-gallery>

Changelog

See the GitHub release history.

Contributing

See CONTRIBUTING.md.

Generated using vue-cli-template-library.