A Vue integration PhotoSwipe image plugin
npm install vue-picture-swipe





This component is a simple wrapper for the awesome Photoswipe.
It's a Vue plugin that displays a gallery of image with swipe function (and more).
Includes lazy (smart) loading (mobile friendly) and thumbnails.

``bash`
npm install --save vue-picture-swipe
You can use it as you want. Here are some examples if you want to use it inline, or in a .vue file component or even with Laravel.
You can using it inline:
`html`
Just remember to register the component:
`javascript
import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);
new Vue({
el: '#app'
})
`
Create a component Example.vue. Then paste this:
`vue`
Edit resources/assets/js/app.js and add this just before the new Vue lines.
`javascript`
import VuePictureSwipe from 'vue-picture-swipe';
Vue.component('vue-picture-swipe', VuePictureSwipe);
Then run your watcher:
`sh`
npm run watch
Use options for Photoswipe options.
`html`
You can access the PhotoSwipe instance via setting a ref, the instance object is exposed as pswp.
`html``js``
this.$refs.pictureSwipe.pswp
| open | Attributes | Listen to | Description |
| --- | --- | --- | --- |
| Open | none | @open | Emitted after gallery opens |
| Close | none | @close | Emitted after gallery closes |
I did not found any vue component that uses thumbnail (smaller version of images) and is mobile-friendly (swipe)
- This one is documented (and issued) in chinese only and has no thumbnails. Edit: I translated the readme (with google translate) and submitted a PR that was accepted, so now, the documentation is in english)
- This one is documented (and issued) in chinese too and has no thumbnails either.
- This one has no documentation.
- This one is a kind of fork of the previous one
- ...
So I created mine.

Source: https://xkcd.com/927/