Install

Using NPM, install pinchit, and add it to your package.json dependencies.

Instantiate

Simply import Pinchit, then instantiate it. No options are passed to the constructor.

Target

Just Pass a css selector or a node element (and some css) and let pinchit do the rest

Prerequisited markup

<div class="img-wrapper">
  <img src="/link/to/your/inage.jpg" alt="">
</div>

Prerequisited css

.img-wrapper {
  overflow: hidden;
}

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

Example: Single element

import pinch from 'pinchit'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  pinch(wrapper);
});

Example: Custom options

import pinch from 'pinchit'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  pinch(wrapper, {
    maxScale: 4,
    minScale: 0.5,
    snapBackSpeed: 500,
  });
});

Example: Methods

reset

import pinch from 'pinchit'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  const pinchImage = pinch(wrapper);
  document
    .querySelector('.reset-button')
    .addEventListener('click', () => {
      pinchImage.reset();
    })
});

Example: Events

import pinch from 'pinchit'

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.img-wrapper');
  const pinchImage = pinch(wrapper);
  pinchImage.on('touchmove', handelTouchMove)
});