bennyxguo / vue-photoswipe

A Vue Integrated PhotoSwipe Image Preview Plugin

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