Vue Picture Swipe Gallery


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.

Demo

Install

``bash
npm install --save vue-picture-swipe
`

Usage

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.

$3

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'
})
`

$3

Create a component Example.vue. Then paste this:

`vue


`

$3

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
`

Advanced usage

$3

Use options for Photoswipe options.

`html


`

$3

You can access the PhotoSwipe instance via setting a ref, the instance object is exposed as pswp.

`html

`
`js
this.$refs.pictureSwipe.pswp
``

$3

| open | Attributes | Listen to | Description |
| --- | --- | --- | --- |
| Open | none | @open | Emitted after gallery opens |
| Close | none | @close | Emitted after gallery closes |

Why?

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/