Vue Photoswipe plugin

一 A Vue Integrated PhotoSwipe Image Preview Plugin

Requirements

PhotoSwipe

Installation

npm i vue-photoswipe -S

Usage

Support

| Supported Package | Version | |-------------------|---------| | Vue | 2.5+ |

Install plugin

import VuePhotoswipe from 'vue-photoswipe'

// defalut install
Vue.use(VuePhotoswipe)

// with parameters install
Vue.use(preview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})

Examples

<template>
  <vue-preview :slides="slide1" @close="handleClose" :fallback="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg"></vue-preview>
</template>

<script>
export default {
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>

Prop

Property

| Property | Description | :--- | :--- | slides | Image data | fallback | Default image - if image is not found, will display fallback image instead

slide item options

| Property | Description | :--- | :--- | src | main (large) image | msrc | small image | alt | image replacement text | w | image width | h | image height

Events

| Event name | Description | parameter | :--- | :--- | :--- | close | close gallery | nothing

License

MIT Copyright (c) 2018 TriDiamond