vue-pswipe

a Vue plugin for PhotoSwipe without set image size

online example

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