dmuka.Zoom

Demo : https://muhammet-kandemir-95.github.io/dmuka.Zoom/

It helps you to add "Zoom" feature to the subjects on browser. By this way, through rolling the mouse cross ball, you can zoom in and zoom out the subject. Example Usage;

• Product images
• Book pages
• Documents
• Detailed Picture Screening

Create Instance

Variables

Name	Type	Default Value	Description
element	HTML Element	document.body	Target element.
increment	float	0.3	Scale x and scale y increment value.
minZoom	float	0.2	Minimum scale x and minimum scale y value.
maxZoom	float	10	Maximum scale x and minimum scale y value.
transitionEnable	boolean	true	Animation enable.
parentEnable	boolean	true	If you want to element append to new zoom element then you should set true the value. So your element will have a new parent.
parentClasses	string:class	""	Parent element classes list. Important : This property only working when parentEnable is true.
parentOverflow	string:css	""	Parent element's overflow's value. Important : This property only working when parentEnable is true.
parentPadding	string:css	""	Parent element's padding's value. Important : This property only working when parentEnable is true.

Events

Name	Parameters	Return Type	Run Time
onZoom	()	undefined	When change zoom on element.
onMove	()	undefined	When change mouse position on element.

Example Usage

var zoom = new dmuka.Zoom({
    /* Variables --BEGIN */
    // --------------------
    
    element: document.querySelector("img"),
    increment: 0.3,
    minZoom: 0.2,
    maxZoom: 10,
    transitionEnable: true,
    parentEnable: true,
    parentClasses: "",
    parentOverflow: "hidden",
    parentPadding: 20,
    
    // --------------------
    /* Variables --END */
    
    /* Events --BEGIN */
    // --------------------
    
    onZoom: function () {
        // this = zoom
        var element = this.DOM.element.get();
        console.log(element, "My Zoom Element - onZoom");
        var parent = this.DOM.parent.get();
        console.log(parent, "My Zoom Parent - onZoom");
    },
    onMove: function () {
        // this = zoom
        var element = this.DOM.element.get();
        console.log(element, "My Zoom Element - onMove");
        var parent = this.DOM.parent.get();
        console.log(parent, "My Zoom Parent - onMove");
    }
    
    // --------------------
    /* Events --END */
});

Public Variables

The basic rule you need to know about Variables is that, they are received with “get” function and updated with “set” function!

zoom.DOM

This variable includes DOM (Document Object Model; ex; body, head, div…) data within component. Template is represented below;

zoom.DOM = {
  // Target Element Content
  element: {
    get: <function():DOM>
  },
  // Parent Element Content
  parent: {
    get: <function():DOM>
  }
}

Public Functions

zoom.zoomIn

Via this function, you can activate the zoom in command of the subject. Template is represented below;

function zoom.zoomIn() {
  // codes
  
  return undefined;
}

Example Usage

zoom.zoomIn();

zoom.zoomOut

Via this function you can activate the zoom out command of the subject. Template is represented below;

function zoom.zoomOut() {
  // codes
  
  return undefined;
}

Example Usage

zoom.zoomOut();

zoom.zoomClear

Via this function you can reset the zoom command of the subject. Template is represented below;

function zoom.zoomClear() {
  // codes
  
  return undefined;
}

Example Usage

zoom.zoomClear();