pin

pinchit

Zoom images without dependencies

Showing:

Popularity

Downloads/wk

20

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

2.8KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100