vue-pswipe !npm  

a Vue plugin for PhotoSwipe without set image size

online example


install

``
npm install vue-pswipe
`

usage

`js
// 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
`vue

:src="imageSrc"
v-pswp="imageSrc"
/>

`

props

| Property | Type | Description | Default |
| --- | --- | --- | --- |
| options | object | original PhotoSwipe options, see complete options | - |
| auto | boolean | automatically collect all img tags without the need for the v-pswp directive | false |
| bubble | boolean | allow click event bubbling | false |
| lazy | boolean | lazy loading image, you can set to false to preload all image | true |
| rotate | boolean | add a rotate action button to the top bar, allow user to rotate the current image | false |

directive

$3

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

Directive Options:
`typescript
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
}
`

event

$3


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

$3

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

Parameters:
- pswp:

current photoswipe instance

$3


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

:src="imageSrc"
v-pswp="imageSrc"
/>

`

custom html

In addition to using the 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.
`vue


`

Vue.prototyp.$Pswp.open:
`typescript
type Open = (params: {
items: PswpItem[],
options?: PswpOptions
}) => pswp
`

dynamic import


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

`

example

`
npm run dev
``

License

MIT