vue-zoombox
a advanced zoombox.
- Reposition on window resize
- Full resolution for images
- support for caption
- support for scrolling
- support for thumbs
Demo
Install
npm install --save-dev vue-zoombox
or include build/bundle.js
.
Usage
# in your component components: "zoombox": require"vue-zoombox"# or, when using bundle.js components: "zoombox": windowvueCompszoombox
A caption loading... Will be shown besides the image when opened
see dev/
for examples.
Props
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 after delay
or on mouseenter
.
If the image isn't loaded on click, the slot loading
is displayed.
Events
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-way is-opened prop |
Transition
You can provide a vue transition like this:
Vue// or in the instance:transitions: fade: // your transition // usage:template: "<zoombox transition='fade'></zoombox>"
You can access several properties in your hooks:
{ self = this this}
Example from dev/basic.vue
Velocity = require"velocity-animate" transitions: zoombox: css: false : Velocityhookel"scale"@imgScale @$nextTick => Velocity elscale:@imgScale*@scaletop:@relPostopleft:@relPosleft duration: 1000 queue: false ease: "easeOutQuad" complete: done : Velocityhookel"scale"@imgScale*@scale Velocity elscale:@imgScaletop:0left:0 duration: 1000 queue: false ease: "easeOutQuad" complete: done
Changelog
-
1.0.2
added opened slot
little bugfix with lineheight -
1.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
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.