Nonviolent Pigeon Manifestation
Have ideas to improve npm?Join in the discussion! »

pinchit

0.6.2 • Public • Published

Pinch it

Build Status Coverage Status

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.

Install

npm i pinchit

DownloadsWeekly Downloads

10

Version

0.6.2

License

MIT

Last publish

Collaborators

  • avatar
  • avatar