Vue PhotoSwipe

!npm

PhotoSwipe, PhotoSwipeGallery component for Vuejs base on PhotoSwipe.

Installation

$3

`` bash
npm install --save v-photoswipe
`

Usage

$3

` html

`

$3

` js
import { PhotoSwipe, PhotoSwipeGallery } from 'v-photoswipe'
export default {
components: {
'v-photoswipe': PhotoSwipe,
'v-photoswipe-gallery': PhotoSwipeGallery
},
data () {
return {
isOpen: false,
isOpenGallery: false,
options: {
index: 0
},
optionsGallery: {},
items: [
{
src: 'https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg',
w: 1600,
h: 1600,
title: 'This is dummy caption.'
}, {
src: 'https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg',
w: 1600,
h: 1066,
title: 'This is dummy caption. It has been placed here solely to demonstrate the look and feel of finished, typeset text.'
}
]
}
},
methods: {
showPhotoSwipe (index) {
this.isOpen = true
this.$set(this.options, 'index', index)
},
hidePhotoSwipe () {
this.isOpen = false
}
}
}
``

Props

$3

| Name | Type | Default | Required | Description |
|---------------------|-------------|---------|----------|---------------------------|
| isOpen | Boolean | false | true | |
| items | Array | [] | true | Document |
| options | Object | {} | fasle | Document |
| beforeChange | Function | | | Photoswipe event listener |
| afterChange | Function | | | Photoswipe event listener |
| imageLoadComplete | Function | | | Photoswipe event listener |
| resize | Function | | | Photoswipe event listener |
| gettingData | Function | | | Photoswipe event listener |
| mouseUsed | Function | | | Photoswipe event listener |
| initialZoomIn | Function | | | Photoswipe event listener |
| initialZoomInEnd | Function | | | Photoswipe event listener |
| initialZoomOut | Function | | | Photoswipe event listener |
| initialZoomOutEnd | Function | | | Photoswipe event listener |
| parseVerticalMargin | Function | | | Photoswipe event listener |
| close | Function | | | Photoswipe event listener |
| unbindEvents | Function | | | Photoswipe event listener |
| destroy | Function | | | Photoswipe event listener |
| updateScrollOffset | Function | | | Photoswipe event listener |
| preventDragEvent | Function | | | Photoswipe event listener |
| shareLinkClick | Function | | | Photoswipe event listener |

Slot

$3

| Name | Type | Default | Required | Description |
|---------|-----------|--------------|----------|-------------|
| item | Object | HTML Img Tag | false | |

Demo

coming soon...