Skip to content

πŸš€ Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin

License

Notifications You must be signed in to change notification settings

GuoQichen/vue-pswipe

Repository files navigation

vue-pswipe npm Build Status codecov

a Vue plugin for PhotoSwipe without set image size

online example

Edit Vue Template

install

npm install vue-pswipe

usage

// main.js
import Photoswipe from 'vue-pswipe'

Vue.use(Photoswipe, options)

see complete options

you can set v-pswp directive in element to mark as clickable

<Photoswipe>
    <img 
        :src="imageSrc"
        v-pswp="imageSrc"
    />
</Photoswipe>

props

Property Type Description Default
options object original PhotoSwipe options, see complete options -
auto boolean automatically collect all img tags without the need for the v-pswp directive false
bubble boolean allow click event bubbling false
lazy boolean lazy loading image, you can set to false to preload all image true
rotate boolean add a rotate action button to the top bar, allow user to rotate the current image false

directive

v-pswp: object|string

use for mark current element as gallery item, accept image src or options object

Directive Options:

interface PswpDirectiveOptions {
    /**
     * path to image
     */
    src: string
    /**
     * image size, 'width x height', eg: '100x100'
     */
    size?: string
    /**
     * small image placeholder,
     * main (large) image loads on top of it,
     * if you skip this parameter - grey rectangle will be displayed,
     * try to define this property only when small image was loaded before
     */
    msrc?: string
    /**
     * used by Default PhotoSwipe UI
     * if you skip it, there won't be any caption
     */
    title?: string
    /**
     * to make URLs to a single image look like this: http://example.com/#&gid=1&pid=custom-first-id
     * instead of: http://example.com/#&gid=1&pid=1
     * enable options history: true, galleryPIDs: true and add pid (unique picture identifier) 
     */
    pid?: string | number
}

event

beforeOpen

emit after click thumbnail, if listen to this event, next function must be called to resolve this hook

Parameters:

  • event:

    • index: current image index
    • target: the target that triggers effective click event
  • next:

    must be called to resolve the hook. next(false) will abort open PhotoSwipe

opened

emit after photoswipe init, you can get current active photoswipe instance by parameter

Parameters:

  • pswp:

    current photoswipe instance

original PhotoSwipe event

support all original PhotoSwipe events, see original event, eg:

<Photoswipe @beforeChange="handleBeforeChange">
    <img 
        :src="imageSrc"
        v-pswp="imageSrc"
    />
</Photoswipe>

WARNING: If you using Photoswipe component in HTML, not in a SFC, use v-on instead, because HTML tag and attributes are case insensitive

<Photoswipe v-on ="{ beforeChange: handleBeforeChange }">
    <img 
        :src="imageSrc"
        v-pswp="imageSrc"
    />
</Photoswipe>

custom html

In addition to using the <Photoswipe> tag, you can also use Vue.prototype.$Pswp.open(params) to directly open a PhotoSwipe. This is especially useful in the case of Custom HTML Content in Slides.

<template>
    <button @click="handleClick">open</button>
</template>
<script>
export default {
    methods: {
        handleClick() {
            this.$Pswp.open({
                items: [
                    {
                        html: '<div>hello vue-pswipe</div>'
                    }
                ]
            })
        }
    }
}
</script>

Vue.prototyp.$Pswp.open:

type Open = (params: {
    items: PswpItem[],
    options?: PswpOptions
}) => pswp

dynamic import

But cannot use vue.prototype.$Pswp.open()

<script>
export default {
    components: {
        Photoswipe: () => import('vue-pswipe')
            .then(({ Photoswipe }) => Photoswipe)
    } 
}
</script>

example

npm run dev

License

MIT