{"id":13476004,"url":"https://github.com/GuoQichen/vue-pswipe","last_synced_at":"2025-03-27T01:30:45.803Z","repository":{"id":32624469,"uuid":"138280152","full_name":"GuoQichen/vue-pswipe","owner":"GuoQichen","description":"🚀 Easy to use, no need to set size, support rotation, photoswipe based vue swipe plugin","archived":false,"fork":false,"pushed_at":"2023-01-03T15:18:44.000Z","size":5594,"stargazers_count":106,"open_issues_count":21,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T09:21:21.146Z","etag":null,"topics":["carousel","gallery","photoswipe","photoswipe-library","slider","vue","vue-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuoQichen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-22T08:59:47.000Z","updated_at":"2024-03-11T19:42:19.000Z","dependencies_parsed_at":"2023-01-14T21:45:34.595Z","dependency_job_id":null,"html_url":"https://github.com/GuoQichen/vue-pswipe","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuoQichen%2Fvue-pswipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuoQichen%2Fvue-pswipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuoQichen%2Fvue-pswipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuoQichen%2Fvue-pswipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuoQichen","download_url":"https://codeload.github.com/GuoQichen/vue-pswipe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245764607,"owners_count":20668448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","gallery","photoswipe","photoswipe-library","slider","vue","vue-plugin"],"created_at":"2024-07-31T16:01:25.585Z","updated_at":"2025-03-27T01:30:43.624Z","avatar_url":"https://github.com/GuoQichen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue-pswipe ![npm](https://img.shields.io/npm/v/vue-pswipe) [![Build Status](https://travis-ci.com/GuoQichen/vue-pswipe.svg?branch=master)](https://travis-ci.com/GuoQichen/vue-pswipe) [![codecov](https://codecov.io/gh/GuoQichen/vue-pswipe/branch/master/graph/badge.svg)](https://codecov.io/gh/GuoQichen/vue-pswipe)\na Vue plugin for PhotoSwipe without set image size\n\n## online example\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/619x48656r)\n\n## install\n```\nnpm install vue-pswipe\n```\n\n## usage\n\n```js\n// main.js\nimport Photoswipe from 'vue-pswipe'\n\nVue.use(Photoswipe, options)\n```\nsee [complete options](http://photoswipe.com/documentation/options.html)\n\nyou can set `v-pswp` directive in element to mark as clickable\n```vue\n\u003cPhotoswipe\u003e\n    \u003cimg \n        :src=\"imageSrc\"\n        v-pswp=\"imageSrc\"\n    /\u003e\n\u003c/Photoswipe\u003e\n```\n\n## props\n\n| Property | Type | Description | Default |\n| --- | --- | --- | --- |\n| options | object | original PhotoSwipe options, see [complete options](http://photoswipe.com/documentation/options.html) | - | \n| auto | boolean | automatically collect all img tags without the need for the `v-pswp` directive | false |\n| bubble | boolean | allow click event bubbling | false |\n| lazy | boolean | lazy loading image, you can set to false to preload all image | true |\n| rotate | boolean | add a rotate action button to the top bar, allow user to rotate the current image | false |\n\n## directive\n\n### `v-pswp: object|string`\nuse for mark current element as gallery item, accept **image src** or **options object**\n\nDirective Options:\n```typescript\ninterface PswpDirectiveOptions {\n    /**\n     * path to image\n     */\n    src: string\n    /**\n     * image size, 'width x height', eg: '100x100'\n     */\n    size?: string\n    /**\n     * small image placeholder,\n     * main (large) image loads on top of it,\n     * if you skip this parameter - grey rectangle will be displayed,\n     * try to define this property only when small image was loaded before\n     */\n    msrc?: string\n    /**\n     * used by Default PhotoSwipe UI\n     * if you skip it, there won't be any caption\n     */\n    title?: string\n    /**\n     * to make URLs to a single image look like this: http://example.com/#\u0026gid=1\u0026pid=custom-first-id\n     * instead of: http://example.com/#\u0026gid=1\u0026pid=1\n     * enable options history: true, galleryPIDs: true and add pid (unique picture identifier) \n     */\n    pid?: string | number\n}\n```\n\n## event\n\n### `beforeOpen`\nemit after click thumbnail, if listen to this event, **`next` function must be called to resolve this hook**\n\nParameters: \n- `event`:\n    - `index`: current image index\n    - `target`: the target that triggers effective click event\n- `next`: \n\n    must be called to resolve the hook. `next(false)` will abort open PhotoSwipe\n\n### `opened`\nemit after photoswipe init, you can get current active photoswipe instance by parameter\n\nParameters:\n- `pswp`:\n\n    current photoswipe instance\n\n### original PhotoSwipe event\n**support all original PhotoSwipe events**, see [original event](https://github.com/dimsemenov/PhotoSwipe/blob/master/website/documentation/api.md#events), eg: \n```vue\n\u003cPhotoswipe @beforeChange=\"handleBeforeChange\"\u003e\n    \u003cimg \n        :src=\"imageSrc\"\n        v-pswp=\"imageSrc\"\n    /\u003e\n\u003c/Photoswipe\u003e\n```\n\nWARNING: If you using Photoswipe component in HTML, not in a SFC, use `v-on` instead, because HTML tag and attributes are case insensitive\n```vue\n\u003cPhotoswipe v-on =\"{ beforeChange: handleBeforeChange }\"\u003e\n    \u003cimg \n        :src=\"imageSrc\"\n        v-pswp=\"imageSrc\"\n    /\u003e\n\u003c/Photoswipe\u003e\n```\n\n## custom html\nIn addition to using the `\u003cPhotoswipe\u003e` 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](https://photoswipe.com/documentation/custom-html-in-slides.html).\n```vue\n\u003ctemplate\u003e\n    \u003cbutton @click=\"handleClick\"\u003eopen\u003c/button\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n    methods: {\n        handleClick() {\n            this.$Pswp.open({\n                items: [\n                    {\n                        html: '\u003cdiv\u003ehello vue-pswipe\u003c/div\u003e'\n                    }\n                ]\n            })\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n`Vue.prototyp.$Pswp.open`:\n```typescript\ntype Open = (params: {\n    items: PswpItem[],\n    options?: PswpOptions\n}) =\u003e pswp\n```\n\n## dynamic import\n**But cannot use `vue.prototype.$Pswp.open()`**\n```vue\n\u003cscript\u003e\nexport default {\n    components: {\n        Photoswipe: () =\u003e import('vue-pswipe')\n            .then(({ Photoswipe }) =\u003e Photoswipe)\n    } \n}\n\u003c/script\u003e\n```\n\n## example\n```\nnpm run dev\n```\n\n## License\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuoQichen%2Fvue-pswipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGuoQichen%2Fvue-pswipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuoQichen%2Fvue-pswipe/lists"}