Skip to content

Leesson/v-photoswipe

Repository files navigation

Vue PhotoSwipe

npm

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