Home

Awesome

vue-zoombox

a advanced zoombox.

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": window.vueComps.zoombox
<zoombox src="./path/to/img" thumb="./path/to/thumb">
  <span>A caption</span>
  <span slot="loading">loading...</span>
  <span slot="opened">Will be shown besides the image when opened</span>
</zoombox>

see dev/ for examples.

Props

Nametypedefaultdescription
srcString-(required) path to image.
thumbString-path to thumb
delayNumber3000Only if thumb is given, delays loading of the image, in ms. 0 to disable auto load of image.
opacityNumber0.5opacity of the overlay
max-scaleNumberNumber.MAX_VALUEmaximal zoom factor
allow-scrollBooleanfalsewill not close on scroll
disable-scrollBooleanfalsewill disable scrolling
is-openedBooleanfalse(two-way) set to open / close
transitionString"zoombox"name of a vue transition. Detailed description
caption-transitionString"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

Namedescription
before-enterwill be called before open animation
after-enterwill be called when opened
before-leavewill be called before close animation
after-leavewill be called when closed
thumb-loadedwill be called when thumb is ready
image-loadedwill 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.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 = this
  this.nextTick(function(){
    self.imgScale // scale to get the small image size
    self.scale // multiply with imgScale to get the big image size
    // target top and left positions for big image size
    self.relPos.top
    self.relPos.left
    // starting position for top and left are 0
  })
}

Example from dev/basic.vue

Velocity = require("velocity-animate")

transitions:
  zoombox:
    css: false
    enter: (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
      }

Changelog

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.