- Notifications
You must be signed in to change notification settings - Fork7
vue-comps/vue-zoombox
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
a advanced zoombox.
- Reposition on window resize
- Full resolution for images
- support for caption
- support for scrolling
- support for thumbs
npm install --save-dev vue-zoombox
or includebuild/bundle.js.
# in your componentcomponents:"zoombox":require("vue-zoombox")# or, when using bundle.jscomponents:"zoombox":window.vueComps.zoombox
<zoomboxsrc="./path/to/img"thumb="./path/to/thumb"><span>A caption</span><spanslot="loading">loading...</span><spanslot="opened">Will be shown besides the image when opened</span></zoombox>
seedev/ for examples.
| Name | type | default | description |
|---|---|---|---|
| src | String | - | (required) path to image. |
| thumb | String | - | path to thumb |
| delay | Number | 3000 | Only if thumb is given, delays loading of the image, in ms. 0 to disable auto load of image. |
| opacity | Number | 0.5 | opacity of the overlay |
| max-scale | Number | Number.MAX_VALUE | maximal zoom factor |
| allow-scroll | Boolean | false | will not close on scroll |
| disable-scroll | Boolean | false | will disable scrolling |
| is-opened | Boolean | false | (two-way) set to open / close |
| transition | String | "zoombox" | name of a vue transition.Detailed description |
| caption-transition | String | "zoomboxCaption" | name of a vue transition.Detailed description |
if thumb is given the image is loaded afterdelay or onmouseenter.
If the image isn't loaded on click, the slotloading is displayed.
| Name | description |
|---|---|
| before-enter | will be called before open animation |
| after-enter | will be called when opened |
| before-leave | will be called before close animation |
| after-leave | will be called when closed |
| thumb-loaded | will be called when thumb is ready |
| image-loaded | will be called when image is ready |
| toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-wayis-opened prop |
You can provide a vue transition like this:
Vue.transition("fade",{// your transition})// or in the instance:transitions:{fade:{// your transition}}// usage:template:"<zoombox transition='fade'></zoombox>"
You can access several properties in your hooks:
enter:function(el,cb){self=thisthis.nextTick(function(){self.imgScale// scale to get the small image sizeself.scale// multiply with imgScale to get the big image size// target top and left positions for big image sizeself.relPos.topself.relPos.left// starting position for top and left are 0})}
Example fromdev/basic.vue
Velocity=require("velocity-animate")transitions:zoombox:css:falseenter: (el,done)->Velocity.hook(el,"scale",@imgScale)@$nextTick=>Velocity el, {scale:@imgScale*@scale,top:@relPos.top,left:@relPos.left}, {duration:1000,queue:false,ease:"easeOutQuad",complete: done }leave: (el,done)->Velocity.hook(el,"scale",@imgScale*@scale)Velocity el, {scale:@imgScale,top:0,left:0}, {duration:1000,queue:false,ease:"easeOutQuad",complete: done }
1.0.2
added opened slot
little bugfix with lineheight1.0.1
close overlay on destroy
changed container behavior to allow responsive images (#1)1.0.0
removed support for other content (only images now)
now using vue transitions
events are renamed after vue transitions
added support for thumbs
added unit tests
Clone repository.
npm installnpm run dev
Browse tohttp://localhost:8080/.
Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.
About
a advanced zoombox
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.