please avoid using large pictures or they may crash your browser(especially on Android).
example for list:
[{
msrc: 'https://placekitten.com/500/250',
src: 'https://placekitten.com/800/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
msrc: 'https://placekitten.com/120/90', // thumbnail
w: 1200,
h: 900
}]
before v2.4.0, w and h should be specified.
Prevewing an image by index:
this.$refs.previewer.show(index)
API
Props
| name | type | default | description | required version |
| list | array | images list | -- | |
| options | object | options for photoswipe | -- |
Events
| name | params | description | required version |
| @on-close | -- | fires after closing | v2.2.1-rc.4 |
| @on-index-change | -- | fires after index changes(shall not fire on first opening slide) | v2.8.1 |
Slots
| name | description | required version |
| button-after | slot after control button list | v2.6.3 |
| button-before | slot before control button list | v2.6.3 |
Functions
| name | params | description | required version |
| goTo | (index) | go to specified image | v2.5.10 |
| prev | go to previous image | v2.5.10 | |
| v2.9.1 | go to next image | v2.5.10 | |
| getCurrentIndex | get current index | v2.6.3 |
Changelog
Releases
- v2.8.1 [feature] add event:on-index-change #2505
- v2.6.4 [feature] automatically update view if one slide is deleted
- v2.6.3 [fix] fix method name starts with _ will get vue(2.4.4) warning #2001
- v2.6.3 [feature] add method:getCurrentIndex
- v2.6.3 [feature] add slot:button-before slot:button-after
- v2.5.10 [enhance] Support method:goTo #1888
- v2.4.0 [enhance] Use src as msrc by default
- v2.4.0 [enhance] No more force setting width and height #1426
- v2.2.1-rc.4 [enhance] Increase the closing event #1245