Naughty Pinching Mannequins

    v-photoswipe

    1.0.3-1 • Public • Published

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

    Install

    npm i v-photoswipe

    DownloadsWeekly Downloads

    777

    Version

    1.0.3-1

    License

    MIT

    Unpacked Size

    690 kB

    Total Files

    20

    Last publish

    Collaborators

    • leesson