kuiyouli / v-photoswipe

Vue plugin for image preview base on PhotoSwipe

Vue PhotoSwipe

PhotoSwipe, PhotoSwipeGallery component for Vuejs base on PhotoSwipe.

Installation

NPM

  npm install --save v-photoswipe  

Usage

Template

<template>
  <div>
    <div class="paragraph">
      <h3>PhotoSwipe</h3>
      <div>
        <img @click="showPhotoSwipe(0)" src="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" alt="">
        <img @click="showPhotoSwipe(1)" src="https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg" alt="">
      </div>
    </div>
    <div class="paragraph">
      <h3>PhotoSwipe Gallery</h3>
      <div>
        <v-photoswipe-gallery :isOpen="isOpenGallery" :options="optionsGallery" :items="items">
          <img slot-scope="props" :src="props.item.src" alt="picture"/>
        </v-photoswipe-gallery>
      </div>
    </div>
    <v-photoswipe :isOpen="isOpen" :items="items" :options="options" @close="hidePhotoSwipe"></v-photoswipe>
  </div>
</template>  

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

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...