pinchit

Pinch it

Description

Zoom images without dependencies

Install with npm

npm install --save pinchit

Install with bower

bower install pinchit --save

Usage

Prerequisited markup

<div class="img-wrapper">
    <img src="" alt="">
</div>

Prerequisited css

.img-wrapper {
  overflow: hidden;
}
 
.img-wrapper img {
  max-width: 100%;
}
 

Integration

  import pinchit from 'pinchit';
  var wrapper = document.querySelectorAll('.img-wrapper');
 
  pinchit(wrapper, {
      // options going here
  });

Public API

setup	Binds eventlisteners, merging default and user options, setup the pinch based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.
reset	sets the pinch back to the starting position
destroy	destroys the pinchit instance by removing all pinch specific event listeners

Options

baseScale	Default scale that will be set on element
maxScale	Max scale a node can reach
minScale	Min scale a node can reach
snapBackSpeed	time for the snapBack of the pinch if the node has reach above or below its pinch value
ease	default easing method

Browser Support

• Chrome
• Safari
• FireFox

License

MIT. Copyright (c) 2016 Philip Knape.