guoqichen / vue-pswipe

🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin

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

vue-pswipe's Issues

Bundle size

According to bundlephobia the library is quite big in terms of size.

Let's compare minified size:

vue-pswipe: 81.4 kB
photoswipe: 30.9kB
vue       : 63.5kB

So currently it's bigger then vue itself which is not good.
I suppose it to be ~35-40kb.

I wonder what might cause such a size? 🤔

New version not released

Hi, I have installed latest version 0.15.2 but that one still seems to miss latest commit that fixes types. It causes build fails and I do not want to disable typescript checking.

How to load and use on demand？

LazyLoading do not work as aspekted

I noticed with a picture gallery with almost 200 pictures that they are all loaded with the opening of the page. I suppose this is because the original dimensions are determined.

If you click on a picture from the gallery, it automatically preloads the previous and the following picture. That would be exactly the behavior I would want to have.

How can you prevent all images from being loaded when initializing the image gallery?

use ES6 in code that cant support ios9

this.$Pswp.open does't work

this.$Pswp.open doesn't work because this.$Pswp is null.

imported LIB in main.js like you describe on the docs:

let photoSwipeOptions = {}; import Photoswipe from 'vue-pswipe'; Vue.use(Photoswipe, photoSwipeOptions);

and want to open photoswipe from js like:
handleClick() { this.$Pswp.open({ items: [ { html: '<div class="hello-slide"><h1>Hello world <a href="http://example.com">example.com</a></h1></div>', }, { src: 'https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg', }, ], }); }

Can't seem to add event handler to Pswp for Custom HTML implementation

The $Pswp object doesn't expose anything to add event handlers.

For accessibility reasons, I need to attach a callback to the close event to return the focus to the button that triggered the opening.

cant trigger input upload in default slots

because onThumbnailsClick contain e.preventDefault(), block input click event, so cant trigger input click

Cannot listen to photoswipe events

The only event that shows up in the Vue devtools is opened. I try to listen for the beforeChange event like this:

<photoswipe  @beforeChange="handleBeforeChange">

vue-pswipe version: 0.14.5

not ssr friendly

The photoswipe UI is compiled and is appended to document object during the created() hook.

vue-pswipe/src/components/photoswipe.vue

Lines 220 to 222 in 08ebf7a

	created() {
	UI.append()
	}

vue-pswipe/src/utils.ts

Lines 188 to 198 in 08ebf7a

	/**
	* append element to document.body
	* @param el the element to be append to body
	* @return return appended element
	*/
	const append = (el: HTMLElement) => document.body.appendChild(el)
	/**
	* append element to body only once
	*/
	export const appendOnce = single<HTMLElement>(append)

This is not SSR friendly. UI component's compiling and mounting should be split into two operations, and mounting operation should go to the mounted() hook.

Rendering discontinuous image

eg: real-time chat, there are some text with image, so i need rendering discontinuous image

Allow other tags

it would be really cool if you could use other tags like for example: vuetify v-img
I can only use tags like img's other div's

cant get internal iterate index

if want to remove one of image, must get the image index

seems msrc cannot has space in the filename

when I have the data like
src="https://xx.xx.com/has 3space.jpg"
msrc="https://xx.xx.com/has 3space.thumbnail.jpg"

the thumbnail background maybe empty blank or have a random picture, but the 'src' is working fine.

use image-item cause transition problem

showHideOpacity:true option will resolve this problem

My thumbnails are square, but large images have different dimensions, what to do with opening/closing transition?

FR: Custom HTML Content in Slides

It is not possible to add slides with custom HTML as described here: https://photoswipe.com/documentation/custom-html-in-slides.html

请支持wheelToZoom参数

大图浏览时，滚轮缩放图片很重要，请求支持！

PhotoSwipeUI_Default shareEl: false

Great module!
I want to disable the 'Share' button of the PhotoSwipeUI to false. Can't get my head around on how to do this in vue-pswipe.

Add CSP support

Photoswipe.umd.min.js is blocked by CSP (Content Security Policy) because is using inline style/js

Further read:

1. https://developers.google.com/web/fundamentals/security/csp/
2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#sources

Error:

component does not unmount on navigation

Whenever the pswipe lightbox is open, and a route change happens, the lightbox stays open.
I would expect this to close, since the component itself gets unmounted. How can I fix this?

I tried using appendToEl to append it to my app container in stead of the document body but it does not seem like this option is supported?

Vue3 support

Does this support Vue 3, is it planned ?

should more flexible for upload use-case

write a upload component, I want achieve flow layout, but it's hard for now, because scoped slot may not flexible

图片宽高获取问题

想问一下，不设置图片的宽高的话，那你是怎么通过data-pswp-src 来提前获取图片的宽高的

Captions on images?

Hi,
There doesn't seem any way to pass a caption via title data onto the detail view of the photo.
pswp__caption gets rendered in the DOM but nothing shows up, any ideas?