Knape / panjs

Pan images without dependencies

panJS

Description

Pan images without dependencies

Install with npm

npm install --save panjs

Install with bower

bower install panjs --save

Usage

Prerequisited markup

<div class="img-wrapper">
    <img src="/path/to/image.jpg" alt="">
</div>

Prerequisited css

.img-wrapper {
  overflow: hidden;
}

Integration

  import panjs from 'panjs';
  var wrapper = document.querySelectorAll('.img-wrapper');

  panjs(wrapper, {
    // options going here, at the moment we do not support any options
  });

Public API

Name	Description	arguments	returns
setup	inds eventlisteners, merging default and user options, setup the pan based on DOM (called once during initialisation). Call setup if DOM or user options have changed or eventlisteners needs to be rebinded.	String	HTMLElement
reset	Sets the pan back to the starting position or position passed to method	Object	Void
destroy	Resets and destroys the panjs instance by removing all panjs specific event listeners		Void
offset	Get the current offset, values between 0 - 1		Object

Options

Name	Description	Type	Default
target	If multiple images are inside wrapper, pass a target css selector to select the preferred image	String	Null
offset	Start offset for inner image, between 0 - 1	Object	{ x: 0, y: 0 }
xAxisLock	Ability to lock x-axis	Boolean	false
yAxisLock	Ability to lock y-axis	Boolean	false
speed	Speed on returning to default state when calling reset or destroy	Number	0
easing	Kind of css easing on returning to default state when calling reset or destroy	String	ease

Browser support

Note: If you attend to use this module with older browser its mandatory to polyfill both Array.from and Object.assign

License

MIT. Copyright (c) 2016 Philip Knape.