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
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. |
Name | Parameters | Return Type | Run Time |
---|---|---|---|
onZoom | () | undefined | When change zoom on element. |
onMove | () | undefined | When change mouse position on element. |
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 */
});
The basic rule you need to know about Variables is that, they are received with “get” function and updated with “set” function!
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>
}
}
Via this function, you can activate the zoom in command of the subject. Template is represented below;
function zoom.zoomIn() {
// codes
return undefined;
}
zoom.zoomIn();
Via this function you can activate the zoom out command of the subject. Template is represented below;
function zoom.zoomOut() {
// codes
return undefined;
}
zoom.zoomOut();
Via this function you can reset the zoom command of the subject. Template is represented below;
function zoom.zoomClear() {
// codes
return undefined;
}
zoom.zoomClear();