how could I enable the mouse scroll. I'm using in my project a library called CircleSlider.js (you can read more about it here) and jquery.panzoom-1.7.0.
So, I have made like a semi-circle where i could zoom in (+) and zoom out (-) by moving a button (please take a look at the enclosed picture so you can better understand what I mean - picture).
Till now everything works fine. What I wanted to do is to enable the mouse scroll, so I can zoom in and out inside my picture using the mouse.
Here is my html code:
<g id="zoom-button" transform="rotate(0, 95, 95)">
<title>Zoomen</title>
<circle id="zoom-area" r="8" cx="11" cy="95" stroke="#4c4c4c" fill="url(#lg-zoom-button)" filter="url(#filter-zoom-button)"></circle>
</g>
<script>
And here is my circleSlider.js that i have modified in order to full-fit my needs:
(function() {
function circleSliderJs(options) {
var min = options.min || 0;
var max = options.max || 100;
var value = options.value || 0;
var slideFn = options.slide || function(e, val) {};
var container = $('#' + options.container);
var slider = $('#' + options.slider);
if (!container.length || !slider.length) {
throw Error('container or slider not found!');
}
var sliderWidth = slider.width();
var sliderHeight = slider.height();
var radius = container.width() / 2;
var mdown = false;
function positionSlider(degree) {
var x = Math.round(radius * Math.sin(degree * Math.PI / 180));
var y = Math.round(radius * -Math.cos(degree * Math.PI / 180));
slider.css({
left: x + radius - sliderWidth / 2,
top: y - sliderHeight / 2
});
}
// initial position
var deg = 270 - (value - min) * 180 / (max - min);
positionSlider(deg);
container
.mousedown(function(e) {
mdown = true;
e.originalEvent.preventDefault();
})
.mouseup(function(e) {
mdown = false;
})
.mouseleave(function(e) {
//mdown = false;
})
.mousemove(function(e) {
if (mdown) {
// firefox compatibility
if (typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") {
var targetOffset = $(e.target).offset();
e.offsetX = e.pageX - targetOffset.left;
e.offsetY = e.pageY - targetOffset.top;
}
if ($(e.target).is('#rotationSliderContainer')) {
var mPos = {
x: e.offsetX,
y: e.offsetY + radius
};
} else {
var mPos = {
x: e.target.offsetLeft + e.offsetX,
y: e.target.offsetTop + e.offsetY + radius
};
}
var atan = Math.atan2(mPos.x - radius, mPos.y - radius);
deg = -atan / Math.PI * 180 + 180;
if (deg < 90) {
deg = 90;
} else if (deg > 270) {
deg = 270;
}
positionSlider(deg);
var value = min + (270 - deg) / 180 * (max - min);
slideFn(e, value);
}
});
}
function circleSliderSvg(options) {
var min = options.min || 0;
var max = options.max || 100;
var initialValue = options.value || 0;
var slideFn = options.slide || function(e, val) {};
var container = $(options.container);
var slider = $(options.slider);
if (!container.length || !slider.length) {
throw Error('container or slider not found!');
}
function positionSlider(degree) {
slider.attr('transform', 'rotate(' + degree + ', 95, 95)');
}
function moveHandler(e) {
var evt = e ? e : window.event;
var moveX = 0, moveY = 0;
var radius = container.width() / 2;
if ((evt.clientX || evt.clientY) &&
document.body &&
document.body.scrollLeft!=null) {
moveX = evt.clientX + document.body.scrollLeft;
moveY = evt.clientY + document.body.scrollTop;
}
if ((evt.clientX || evt.clientY) &&
document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.scrollLeft!=null) {
moveX = evt.clientX + document.documentElement.scrollLeft;
moveY = evt.clientY + document.documentElement.scrollTop;
}
if (evt.pageX || evt.pageY) {
moveX = evt.pageX;
moveY = evt.pageY;
}
var x = moveX - container.offset().left - radius;
var y = moveY - container.offset().top - radius;
var deg = Math.atan2(x, y) / Math.PI * -180 + 270;
if (deg < 180) {
deg = 180;
} else if (deg > 360) {
deg = 360;
}
positionSlider(deg);
var value = min + (360 - deg) / 180 * (max - min);
slideFn(e, value);
$(this).addClass('moved');
slider.addClass('active');
return false;
}
// initial position
var initialDeg = (min - initialValue) * 180 / (max - min) + 360;
positionSlider(initialDeg);
slider.mousedown(function(e) {
e.originalEvent.preventDefault();
$('body')
.bind('mousemove', moveHandler)
.bind('mouseup', function(evt) {
$(this)
.unbind('mousemove', moveHandler)
.unbind(evt)
.removeClass('moved');
slider.removeClass('active');
});
});
}
$.fn.extend({
circleSlider: circleSliderSvg
});})();
I hope that I clearly described everything. Looking forward to getting your help.
I have solved this panzoom and mousewheel problem, and it was pretty easy : Here is my code and i will explain it :
var scrollSensitivity = 100;
var mouse = fbCover.maxScale;
$('body').on('mousewheel', function(event) {
mouse = mouse - event.deltaY / scrollSensitivity;
if (mouse <= fbCover.maxScale && mouse >= fbCover.minScale) {
mouse = mouse - event.deltaY / scrollSensitivity;
// console.log(event.deltaX, event.deltaY, event.deltaFactor);
$('img#clippingImage').panzoom('zoom', mouse);
$('#slider').circleSlider({
min : fbCover.minScale,
max : fbCover.maxScale,
step : 0.1,
value : mouse,
slider : '#zoom-button',
container : '#master-control'
});
} else if (mouse > fbCover.maxScale) {
mouse = fbCover.maxScale;
} else if (mouse < fbCover.minScale) {
mouse = fbCover.minScale;
}
// Debug
// console.log(mouse);
});
-first we need to specify the scrollSensitivity. -mouse is a constante (it's the maximum of scale i cannot zoom more than that) -we need to specify also the part of the html page that we could use the mousewheel on it -event.deltaY is the frequency of using the wheel I guess the rest is clear :)