Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/GuoQichen/vue-pswipe
🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin
https://github.com/GuoQichen/vue-pswipe
carousel gallery photoswipe photoswipe-library slider vue vue-plugin
Last synced: 15 days ago
JSON representation
🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin
- Host: GitHub
- URL: https://github.com/GuoQichen/vue-pswipe
- Owner: GuoQichen
- License: mit
- Created: 2018-06-22T08:59:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:18:44.000Z (almost 2 years ago)
- Last Synced: 2024-04-25T09:21:21.146Z (7 months ago)
- Topics: carousel, gallery, photoswipe, photoswipe-library, slider, vue, vue-plugin
- Language: TypeScript
- Homepage:
- Size: 5.33 MB
- Stars: 106
- Watchers: 2
- Forks: 12
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-pswipe  [](https://travis-ci.com/GuoQichen/vue-pswipe) [](https://codecov.io/gh/GuoQichen/vue-pswipe)
a Vue plugin for PhotoSwipe without set image size
## online example
[](https://codesandbox.io/s/619x48656r)
## install
```
npm install vue-pswipe
```
## usage
```js
// main.js
import Photoswipe from 'vue-pswipe'
Vue.use(Photoswipe, options)
```
see [complete options](http://photoswipe.com/documentation/options.html)
you can set `v-pswp` directive in element to mark as clickable
```vue
![]()
```
## props
| Property | Type | Description | Default |
| --- | --- | --- | --- |
| options | object | original PhotoSwipe options, see [complete options](http://photoswipe.com/documentation/options.html) | - |
| 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
### `v-pswp: object|string`
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
### `beforeOpen`
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
### `opened`
emit after photoswipe init, you can get current active photoswipe instance by parameter
Parameters:
- `pswp`:
current photoswipe instance
### original PhotoSwipe event
**support all original PhotoSwipe events**, see [original event](https://github.com/dimsemenov/PhotoSwipe/blob/master/website/documentation/api.md#events), eg:
```vue
![]()
```
WARNING: If you using Photoswipe component in HTML, not in a SFC, use `v-on` instead, because HTML tag and attributes are case insensitive
```vue
![]()
```
## 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](https://photoswipe.com/documentation/custom-html-in-slides.html).
```vue
open
export default {
methods: {
handleClick() {
this.$Pswp.open({
items: [
{
html: '<div>hello vue-pswipe</div>'
}
]
})
}
}
}
```
`Vue.prototyp.$Pswp.open`:
```typescript
type Open = (params: {
items: PswpItem[],
options?: PswpOptions
}) => pswp
```
## dynamic import
**But cannot use `vue.prototype.$Pswp.open()`**
```vue
export default {
components: {
Photoswipe: () => import('vue-pswipe')
.then(({ Photoswipe }) => Photoswipe)
}
}
```
## example
```
npm run dev
```
## License
[MIT](http://opensource.org/licenses/MIT)