Skip to content

Knape/panjs

Repository files navigation

panJS

Build Status Coverage Status Sauce Test Status

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

Sauce Test Status

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.

About

Pan images without dependencies

Resources

License

Stars

Watchers

Forks

Packages

No packages published