a Vue plugin for PhotoSwipe without set image size

npm install vue-pswipe 

// main.js import Photoswipe from 'vue-pswipe' Vue.use(Photoswipe, options)

see complete options

you can set v-pswp directive in element to mark as clickable

<Photoswipe> <img :src="imageSrc" v-pswp="imageSrc" /> </Photoswipe>

use for mark current element as gallery item, accept image src or options object

Directive Options:

interface PswpDirectiveOptions { /**  * path to image  */ src: string /**  * image size, 'width x height', eg: '100x100'  */ size?: string /**  * small image placeholder,  * main (large) image loads on top of it,  * if you skip this parameter - grey rectangle will be displayed,  * try to define this property only when small image was loaded before  */ msrc?: string /**  * used by Default PhotoSwipe UI  * if you skip it, there won't be any caption  */ title?: string /**  * to make URLs to a single image look like this: http://example.com/#&gid=1&pid=custom-first-id  * instead of: http://example.com/#&gid=1&pid=1  * enable options history: true, galleryPIDs: true and add pid (unique picture identifier)   */ pid?: string | number }

emit after click thumbnail, if listen to this event, next function must be called to resolve this hook

Parameters:

• event:

  • index: current image index
  • target: the target that triggers effective click event

• next:

  must be called to resolve the hook. next(false) will abort open PhotoSwipe

emit after photoswipe init, you can get current active photoswipe instance by parameter

Parameters:

• pswp:

  current photoswipe instance

support all original PhotoSwipe events, see original event, eg:

<Photoswipe @beforeChange="handleBeforeChange"> <img :src="imageSrc" v-pswp="imageSrc" /> </Photoswipe>

WARNING: If you using Photoswipe component in HTML, not in a SFC, use v-on instead, because HTML tag and attributes are case insensitive

<Photoswipe v-on ="{ beforeChange: handleBeforeChange }"> <img :src="imageSrc" v-pswp="imageSrc" /> </Photoswipe>

In addition to using the <Photoswipe> tag, you can also use Vue.prototype.$Pswp.open(params) to directly open a PhotoSwipe. This is especially useful in the case of Custom HTML Content in Slides.

<template> <button @click="handleClick">open</button> </template> <script> export default {  methods: {  handleClick() {  this.$Pswp.open({  items: [  {  html: '<div>hello vue-pswipe</div>'  }  ]  })  }  } } </script>

Vue.prototyp.$Pswp.open:

type Open = (params: { items: PswpItem[], options?: PswpOptions }) => pswp

But cannot use vue.prototype.$Pswp.open()

<script> export default {  components: {  Photoswipe: () => import('vue-pswipe')  .then(({ Photoswipe }) => Photoswipe)  }  } </script>

npm run dev 

MIT