{"id":13423924,"url":"https://github.com/vue-comps/vue-zoombox","last_synced_at":"2025-10-17T05:50:28.534Z","repository":{"id":143926981,"uuid":"56278796","full_name":"vue-comps/vue-zoombox","owner":"vue-comps","description":"a advanced zoombox","archived":false,"fork":false,"pushed_at":"2016-10-26T16:58:55.000Z","size":128,"stargazers_count":26,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T17:37:25.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-comps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-15T00:35:42.000Z","updated_at":"2025-02-28T03:02:32.000Z","dependencies_parsed_at":"2024-01-18T04:08:13.936Z","dependency_job_id":"fa7db53c-a809-4550-8bb0-32e47471c9c9","html_url":"https://github.com/vue-comps/vue-zoombox","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-zoombox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-zoombox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-zoombox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-zoombox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-comps","download_url":"https://codeload.github.com/vue-comps/vue-zoombox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244159977,"owners_count":20408017,"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":[],"created_at":"2024-07-31T00:00:45.075Z","updated_at":"2025-10-17T05:50:23.496Z","avatar_url":"https://github.com/vue-comps.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","实用库","Vue","Awesome Vue.js"],"sub_categories":["Component Collections"],"readme":"# vue-zoombox\n\na advanced zoombox.\n- Reposition on window resize\n- Full resolution for images\n- support for caption\n- support for scrolling\n- support for thumbs\n\n### [Demo](https://vue-comps.github.io/vue-zoombox)\n\n# Install\n\n```sh\nnpm install --save-dev vue-zoombox\n```\nor include `build/bundle.js`.\n\n## Usage\n```coffee\n# in your component\ncomponents:\n  \"zoombox\": require(\"vue-zoombox\")\n# or, when using bundle.js\ncomponents:\n  \"zoombox\": window.vueComps.zoombox\n```\n```html\n\u003czoombox src=\"./path/to/img\" thumb=\"./path/to/thumb\"\u003e\n  \u003cspan\u003eA caption\u003c/span\u003e\n  \u003cspan slot=\"loading\"\u003eloading...\u003c/span\u003e\n  \u003cspan slot=\"opened\"\u003eWill be shown besides the image when opened\u003c/span\u003e\n\u003c/zoombox\u003e\n```\nsee [`dev/`](dev/) for examples.\n\n#### Props\nName | type | default | description\n---:| --- | ---| ---\nsrc | String | - | (required) path to image.\nthumb | String | - | path to thumb\ndelay | Number | 3000 | Only if thumb is given, delays loading of the image, in ms. 0 to disable auto load of image.\nopacity | Number | 0.5 | opacity of the overlay\nmax-scale | Number | Number.MAX_VALUE | maximal zoom factor\nallow-scroll | Boolean | false | will not close on scroll\ndisable-scroll\t| Boolean\t| false | will disable scrolling\nis-opened\t| Boolean\t| false | (two-way) set to open / close\ntransition | String | \"zoombox\" | name of a vue transition. [Detailed description](#transition)\ncaption-transition | String | \"zoomboxCaption\" | name of a vue transition. [Detailed description](#transition)\n\nif thumb is given the image is loaded after `delay` or on `mouseenter`.  \nIf the image isn't loaded on click, the slot `loading` is displayed.\n\n#### Events\nName | description\n---:| ---\nbefore-enter | will be called before open animation\nafter-enter |  will be called when opened\nbefore-leave |  will be called before close animation\nafter-leave |  will be called when closed\nthumb-loaded | will be called when thumb is ready\nimage-loaded | will be called when image is ready\ntoggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way `is-opened` prop\n\n\n#### Transition\n\nYou can provide a vue transition like this:\n```js\nVue.transition(\"fade\",{\n  // your transition\n})\n// or in the instance:\ntransitions: {\n  fade: {\n    // your transition\n  }\n}\n// usage:\ntemplate: \"\u003czoombox transition='fade'\u003e\u003c/zoombox\u003e\"\n```\n\nYou can access several properties in your hooks:\n```js\nenter: function(el,cb) {\n  self = this\n  this.nextTick(function(){\n    self.imgScale // scale to get the small image size\n    self.scale // multiply with imgScale to get the big image size\n    // target top and left positions for big image size\n    self.relPos.top\n    self.relPos.left\n    // starting position for top and left are 0\n  })\n}\n```\n\nExample from [dev/basic.vue](dev/basic.vue)\n```coffee\nVelocity = require(\"velocity-animate\")\n\ntransitions:\n  zoombox:\n    css: false\n    enter: (el,done) -\u003e\n      Velocity.hook(el, \"scale\", @imgScale)\n      @$nextTick =\u003e\n        Velocity el, {scale:@imgScale*@scale,top:@relPos.top,left:@relPos.left}, {\n          duration: 1000,\n          queue: false,\n          ease: \"easeOutQuad\",\n          complete: done\n        }\n    leave: (el,done) -\u003e\n      Velocity.hook(el, \"scale\", @imgScale*@scale)\n      Velocity el, {scale:@imgScale,top:0,left:0}, {\n        duration: 1000,\n        queue: false,\n        ease: \"easeOutQuad\",\n        complete: done\n      }\n```\n\n## Changelog\n- 1.0.2  \nadded opened slot  \nlittle bugfix with lineheight  \n\n- 1.0.1  \nclose overlay on destroy  \nchanged container behavior to allow responsive images (#1)  \n\n- 1.0.0  \nremoved support for other content (only images now)  \nnow using vue transitions  \nevents are renamed after vue transitions  \nadded support for thumbs  \nadded unit tests  \n\n# Development\nClone repository.\n```sh\nnpm install\nnpm run dev\n```\nBrowse to `http://localhost:8080/`.\n\n## License\nCopyright (c) 2016 Paul Pflugradt\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-zoombox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-comps%2Fvue-zoombox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-zoombox/lists"}