@mdrajibul/zoomify

zoomify

A JS library to zoomify background image.

Installation

npm install --save @mdrajibul/zoomify

Usage

For nodeJs application

<div style="width:300px;width:400px">
    <div id="bgImage" style="background-position: center top;background-size: cover;background-image: url(https://sb.kaleidousercontent.com/800x533/fe745b9915/cars.jpg);">
</div>

import { Zoomify } from '@mdrajibul/zoomify'

Zoomify.run(document.getElementById('bgImage'));

 //OR

const zoomify = new Zoomify(document.getElementById('bgImage'));
zoomify.start();

For browser application

<script src="./zoomify/umd/zoomify.js" type="text/javascript"></script>

<div style="width:300px;width:400px">
    <div id="bgImage" style="background-position: center top;background-size: cover;background-image: url(https://sb.kaleidousercontent.com/800x533/fe745b9915/cars.jpg);">
</div>

<script>
  document.addEventListener(
      'DOMContentLoaded',
      function() {
          Zoomify.run(document.getElementById('bgImage'));

           //OR

          const zoomify = new Zoomify(document.getElementById('bgImage'));
          zoomify.start();

      },
      false
  );
</script>

Options

Below are the contructor params

• container: A html element
• autoStop: Set true to stop automatically when use mouse out and false to control from outside

Functions

• run : Static method to run zoomify to auto start and auto stop when mouvemove and mouseout
• init: Initialize without start. Useful when control image zoom from outside handler
• start: After initialize user should call start manually. Useful when control image zoom from outside handler
• stop: Use to stop zoomify. Useful when control reset image zoom from outside handler

Demo