Vue PhotoSwipe
PhotoSwipe, PhotoSwipeGallery component for Vuejs base on PhotoSwipe.
Installation
NPM
npm install --save v-photoswipe
Usage
Template
PhotoSwipePhotoSwipe Gallery
JS
components:'v-photoswipe': PhotoSwipe'v-photoswipe-gallery': PhotoSwipeGallery{returnisOpen: falseisOpenGallery: falseoptions:index: 0optionsGallery: {}items:src: 'https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg'w: 1600h: 1600title: 'This is dummy caption.'src: 'https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg'w: 1600h: 1066title: 'This is dummy caption. It has been placed here solely to demonstrate the look and feel of finished, typeset text.'}methods:{thisisOpen = truethis}{thisisOpen = false}
Props
PhotoSwipe & PhotoSwipeGallery
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
PhotoSwipeGallery
Name | Type | Default | Required | Description |
---|---|---|---|---|
item | Object | HTML Img Tag | false |
Demo
coming soon...