Vuejs-Vue pswipe: vue-pswipe - Easy to use, no need to set the size, support rotation, photoswipe based vue swipe plugin

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>

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: () => improt('vue-pswipe')
            .then(({ Photoswipe }) => Photoswipe)
    } 
}
</script>

example

npm run dev

License

MIT

Comments

  • chore(deps): bump path-parse from 1.0.6 to 1.0.7
    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Aug 10, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Add CSP support
    Add CSP support

    Aug 11, 2021

    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: image

    Reply
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5
    chore(deps): bump tmpl from 1.0.4 to 1.0.5

    Sep 22, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump url-parse from 1.5.1 to 1.5.3
    chore(deps): bump url-parse from 1.5.1 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump follow-redirects from 1.7.0 to 1.14.7
    chore(deps): bump follow-redirects from 1.7.0 to 1.14.7

    Jan 12, 2022

    Bumps follow-redirects from 1.7.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump node-fetch from 2.6.0 to 2.6.7
    chore(deps): bump node-fetch from 2.6.0 to 2.6.7

    Jan 22, 2022

    Bumps node-fetch from 2.6.0 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    Changelog

    All notable changes will be recorded here.

    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

    What's Changed

    New Contributors

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.1.0...v3.1.2

    3.1.0

    What's Changed

    ... (truncated)

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • FR: Custom HTML Content in Slides
    FR: Custom HTML Content in Slides

    Feb 6, 2020

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

    Reply
  • PhotoSwipeUI_Default shareEl: false
    PhotoSwipeUI_Default shareEl: false

    Jul 24, 2019

    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.

    Reply
  • seems msrc cannot has space in the filename
    seems msrc cannot has space in the filename

    Jul 22, 2019

    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.

    Reply
  • chore(deps): bump elliptic from 6.4.1 to 6.5.3
    chore(deps): bump elliptic from 6.4.1 to 6.5.3

    Jul 29, 2020

    Bumps elliptic from 6.4.1 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • LazyLoading do not work as aspekted
    LazyLoading do not work as aspekted

    Jun 6, 2019

    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?

    enhancement 
    Reply
  • this.$Pswp.open does't work
    this.$Pswp.open does't work

    Mar 20, 2020

    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', }, ], }); }

    Reply
  • 图片宽高获取问题
    图片宽高获取问题

    Oct 23, 2018

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

    Reply
  • Add ability to create slides with custom HTML content.
    Add ability to create slides with custom HTML content.

    Feb 11, 2020

    Solves https://github.com/GuoQichen/vue-pswipe/issues/15

    Reply
  • Allow other tags
    Allow other tags

    May 25, 2020

    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

    Reply
  • Cannot listen to photoswipe events
    Cannot listen to photoswipe events

    Apr 3, 2020

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

    Bildschirmfoto 2020-04-03 um 08 52 43

    vue-pswipe version: 0.14.5

    Reply