I start with a image in a DIV, i want to zoom in the image with my mousewheel. All is ok but the zoom in start at the xy0 of the image and it is not what i want.. I want to Zoom from my cursor position. There is a way to do that simply under my code ?
Here is the DEMO :
This is my javascript Code look at the //ZOOMABLE part:
/*
* ZOOM
*/
(function (window) {
image(window.document.querySelector('#dropZone'), function (files) {
//Mouse position
function mousePosition(e) {
var result_x = document.getElementById('x_result');
var result_y = document.getElementById('y_result');
result_x.innerHTML = e.clientX;
result_y.innerHTML = e.clientY;
}
document.onmousemove = mousePosition;
//Scroll position
var scrollableElement = document.getElementById('dropZone');
scrollableElement.addEventListener('wheel', scrollDirection);
function scrollDirection(event) {
var delta;
if (event.wheelDelta) {
delta = event.wheelDelta;
} else {
delta = -1 * event.deltaY;
}
if (delta < 0) {
console.log("DOWN");
$("#movable").css("width", "-=30");
$("#movable").css("max-height", "none")
$("#movable").css("max-width", "none")
} else if (delta > 0) {
console.log("UP");
$("#movable").css("width", "+=30");
$("#movable").css("max-height", "none")
$("#movable").css("max-width", "none")
}
}
);
})(this);
