summaryrefslogtreecommitdiffstats
path: root/data/js/jquery.wheelzoom.js
diff options
context:
space:
mode:
Diffstat (limited to 'data/js/jquery.wheelzoom.js')
-rw-r--r--data/js/jquery.wheelzoom.js162
1 files changed, 162 insertions, 0 deletions
diff --git a/data/js/jquery.wheelzoom.js b/data/js/jquery.wheelzoom.js
new file mode 100644
index 000000000..85d75e56f
--- /dev/null
+++ b/data/js/jquery.wheelzoom.js
@@ -0,0 +1,162 @@
+/*!
+ Wheelzoom 2.0.1
+ license: MIT
+ http://www.jacklmoore.com/wheelzoom
+*/
+(function($){
+ var defaults = {
+ zoom: 0.10
+ };
+ var wheel;
+
+ function setSrcToBackground(img) {
+ var transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
+
+ // Explicitly set the size to the current dimensions,
+ // as the src is about to be changed to a 1x1 transparent png.
+ img.width = img.width;
+ img.height = img.height;
+
+ img.style.backgroundImage = "url('"+img.src+"')";
+ img.style.backgroundRepeat = 'no-repeat';
+ img.src = transparentPNG;
+ }
+
+ if ( document.onmousewheel !== undefined ) { // Webkit/Opera/IE
+ wheel = 'onmousewheel';
+ }
+ else if ( document.onwheel !== undefined) { // FireFox 17+
+ wheel = 'onwheel';
+ }
+
+ $.fn.wheelzoom = function(options){
+ var settings = $.extend({}, defaults, options);
+
+ if (!this[0] || !wheel || !('backgroundSize' in this[0].style)) { // do nothing in IE8 and lower
+ return this;
+ }
+
+ return this.each(function(){
+ var img = this,
+ $img = $(img);
+
+ function loaded() {
+ var width = $img.width(),
+ height = $img.height(),
+ bgWidth = width,
+ bgHeight = height,
+ bgPosX = 0,
+ bgPosY = 0;
+
+ function reset() {
+ bgWidth = width;
+ bgHeight = height;
+ bgPosX = bgPosY = 0;
+ updateBgStyle();
+ }
+
+ function updateBgStyle() {
+ if (bgPosX > 0) {
+ bgPosX = 0;
+ } else if (bgPosX < width - bgWidth) {
+ bgPosX = width - bgWidth;
+ }
+
+ if (bgPosY > 0) {
+ bgPosY = 0;
+ } else if (bgPosY < height - bgHeight) {
+ bgPosY = height - bgHeight;
+ }
+
+ img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
+ img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
+ }
+
+ setSrcToBackground(img);
+
+ $img.css({
+ backgroundSize: width+'px '+height+'px',
+ backgroundPosition: '0 0'
+ }).bind('wheelzoom.reset', reset);
+
+ img[wheel] = function (e) {
+ var deltaY = 0;
+
+ e.preventDefault();
+
+ if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
+ deltaY = e.deltaY;
+ } else if (e.wheelDelta) {
+ deltaY = -e.wheelDelta;
+ }
+
+ // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
+ // We have to calculate the target element's position relative to the document, and subtrack that from the
+ // cursor's position relative to the document.
+ var offsetParent = $img.offset();
+ var offsetX = e.pageX - offsetParent.left;
+ var offsetY = e.pageY - offsetParent.top;
+
+ // Record the offset between the bg edge and cursor:
+ var bgCursorX = offsetX - bgPosX;
+ var bgCursorY = offsetY - bgPosY;
+
+ // Use the previous offset to get the percent offset between the bg edge and cursor:
+ var bgRatioX = bgCursorX/bgWidth;
+ var bgRatioY = bgCursorY/bgHeight;
+
+ // Update the bg size:
+ if (deltaY < 0) {
+ bgWidth += bgWidth*settings.zoom;
+ bgHeight += bgHeight*settings.zoom;
+ } else {
+ bgWidth -= bgWidth*settings.zoom;
+ bgHeight -= bgHeight*settings.zoom;
+ }
+
+ // Take the percent offset and apply it to the new size:
+ bgPosX = offsetX - (bgWidth * bgRatioX);
+ bgPosY = offsetY - (bgHeight * bgRatioY);
+
+ // Prevent zooming out beyond the starting size
+ if (bgWidth <= width || bgHeight <= height) {
+ reset();
+ } else {
+ updateBgStyle();
+ }
+ };
+
+ // Make the background draggable
+ img.onmousedown = function(e){
+ var last = e;
+
+ e.preventDefault();
+
+ function drag(e) {
+ e.preventDefault();
+ bgPosX += (e.pageX - last.pageX);
+ bgPosY += (e.pageY - last.pageY);
+ last = e;
+ updateBgStyle();
+ }
+
+ $(document)
+ .on('mousemove', drag)
+ .one('mouseup', function () {
+ $(document).unbind('mousemove', drag);
+ });
+ };
+ }
+
+ if (img.complete) {
+ loaded();
+ } else {
+ $img.one('load', loaded);
+ }
+
+ });
+ };
+
+ $.fn.wheelzoom.defaults = defaults;
+
+}(window.jQuery));