| /* |
| * jQuery PanZoom Plugin |
| * Pan and zoom an image within a parent div. |
| * |
| * version: 0.9.0 |
| * @requires jQuery v1.4.2 or later (earlier probably work, but untested so far) |
| * |
| * Copyright (c) 2011 Ben Lumley |
| * Examples and documentation at: https://github.com/benlumley/jQuery-PanZoom |
| * |
| * Dual licensed under the MIT and GPL licenses: |
| * http://www.opensource.org/licenses/mit-license.php |
| * http://www.gnu.org/licenses/gpl.html |
| */ |
| |
| (function( $ ){ |
| |
| $.fn.panZoom = function(method) { |
| |
| if ( methods[method] ) { |
| return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); |
| } else if ( typeof method === 'object' || ! method ) { |
| return methods.init.apply( this, arguments ); |
| } else { |
| $.error( 'Method ' + method + ' does not exist' ); |
| } |
| |
| }; |
| |
| $.fn.panZoom.defaults = { |
| zoomIn : false, |
| zoomOut : false, |
| panUp : false, |
| panDown : false, |
| panLeft : false, |
| panRight : false, |
| fit : false, |
| out_x1 : false, |
| out_y1 : false, |
| out_x2 : false, |
| out_y2 : false, |
| min_width : 20, |
| min_height : 20, |
| zoom_step : 3, |
| pan_step : 3, |
| debug : false, |
| directedit : false, |
| aspect : true, |
| factor : 1, |
| animate : true, |
| animate_duration : 200, |
| animate_easing : 'linear', |
| double_click : true, |
| mousewheel : true, |
| mousewheel_delta : 1, |
| draggable : true, |
| clickandhold : true |
| }; |
| |
| var settings = {} |
| |
| var methods = { |
| 'init': function (options) { |
| $.extend(settings, $.fn.panZoom.defaults, options); |
| setupCSS.apply(this); |
| setupData.apply(this); |
| setupBindings.apply(this); |
| methods.readPosition.apply(this); |
| }, |
| |
| 'destroy': function () { |
| $(window).unbind('.panZoom'); |
| this.removeData('panZoom'); |
| }, |
| |
| 'loadImage': function () { |
| var data = this.data('panZoom'); |
| loadTargetDimensions.apply(this); |
| methods.updatePosition.apply(this); |
| if (data.last_image != null && data.last_image != this.attr('src')) { |
| methods.fit.apply(this); |
| } |
| data.last_image = this.attr('src'); |
| data.loaded = true; |
| }, |
| |
| 'readPosition': function () { |
| var data = this.data('panZoom'); |
| if (settings.out_x1) { data.position.x1 = settings.out_x1.val()*settings.factor } |
| if (settings.out_y1) { data.position.y1 = settings.out_y1.val()*settings.factor } |
| if (settings.out_x2) { data.position.x2 = settings.out_x2.val()*settings.factor } |
| if (settings.out_y2) { data.position.y2 = settings.out_y2.val()*settings.factor } |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'updatePosition': function() { |
| validatePosition.apply(this); |
| writePosition.apply(this); |
| applyPosition.apply(this); |
| }, |
| |
| 'fit': function () { |
| var data = this.data('panZoom'); |
| data.position.x1 = 0; |
| data.position.y1 = 0; |
| data.position.x2 = data.viewport_dimensions.x; |
| data.position.y2 = data.viewport_dimensions.y; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'zoomIn': function (steps) { |
| var data = this.data('panZoom'); |
| if (typeof(steps) == 'undefined') { |
| var steps = getStepDimensions.apply(this); |
| } |
| console.debug(data.position); |
| console.debug(data.viewport_dimensions); |
| data.position.x1 = data.position.x1*1 - steps.zoom.x; |
| data.position.x2 = data.position.x2*1 + steps.zoom.x; |
| data.position.y1 = data.position.y1*1 - steps.zoom.y; |
| data.position.y2 = data.position.y2*1 + steps.zoom.y; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'zoomOut': function (steps) { |
| var data = this.data('panZoom'); |
| if (typeof(steps) == 'undefined') { |
| var steps = getStepDimensions.apply(this); |
| } |
| data.position.x1 = data.position.x1*1 + steps.zoom.x; |
| data.position.x2 = data.position.x2*1 - steps.zoom.x; |
| data.position.y1 = data.position.y1*1 + steps.zoom.y; |
| data.position.y2 = data.position.y2*1 - steps.zoom.y; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'panUp': function () { |
| var data = this.data('panZoom'); |
| var steps = getStepDimensions.apply(this); |
| data.position.y1 -= steps.pan.y; |
| data.position.y2 -= steps.pan.y; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'panDown': function () { |
| var data = this.data('panZoom'); |
| var steps = getStepDimensions.apply(this); |
| data.position.y1 = data.position.y1*1 + steps.pan.y; |
| data.position.y2 = data.position.y2*1 + steps.pan.y; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'panLeft': function () { |
| var data = this.data('panZoom'); |
| var steps = getStepDimensions.apply(this); |
| data.position.x1 -= steps.pan.x; |
| data.position.x2 -= steps.pan.x; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'panRight': function () { |
| var data = this.data('panZoom'); |
| var steps = getStepDimensions.apply(this); |
| data.position.x1 = data.position.x1*1 + steps.pan.x; |
| data.position.x2 = data.position.x2*1 + steps.pan.x; |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'mouseWheel': function (delta) { |
| // first calculate how much to zoom in/out |
| var steps = getStepDimensions.apply(this); |
| steps.zoom.x = steps.zoom.x * (Math.abs(delta) / settings.mousewheel_delta); |
| steps.zoom.y = steps.zoom.y * (Math.abs(delta) / settings.mousewheel_delta); |
| |
| // then do it |
| if (delta > 0) { |
| methods.zoomIn.apply(this, [steps]); |
| } else if (delta < 0) { |
| methods.zoomOut.apply(this, [steps]); |
| } |
| }, |
| |
| 'dragComplete': function() { |
| var data = this.data('panZoom'); |
| data.position.x1 = this.position().left; |
| data.position.y1 = this.position().top; |
| data.position.x2 = this.position().left*1 + this.width(); |
| data.position.y2 = this.position().top*1 + this.height(); |
| methods.updatePosition.apply(this); |
| }, |
| |
| 'mouseDown': function (action) { |
| methods[action].apply(this); |
| |
| if (settings.clickandhold) { |
| var data = this.data('panZoom'); |
| methods.mouseUp.apply(this); |
| data.mousedown_interval = window.setInterval(function (that, action) { |
| that.panZoom(action); |
| }, settings.animate_duration, this, action); |
| } |
| }, |
| |
| 'mouseUp': function() { |
| var data = this.data('panZoom'); |
| window.clearInterval(data.mousedown_interval); |
| } |
| |
| } |
| |
| function setupBindings() { |
| |
| eventData = { target: this } |
| |
| // bind up controls |
| if (settings.zoomIn) { |
| settings.zoomIn.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'zoomIn'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.zoomOut) { |
| settings.zoomOut.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'zoomOut'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.panUp) { |
| settings.panUp.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'panUp'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.panDown) { |
| settings.panDown.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'panDown'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.panLeft) { |
| settings.panLeft.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'panLeft'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.panRight) { |
| settings.panRight.bind('mousedown.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseDown', 'panRight'); |
| }).bind('mouseleave.panZoom mouseup.panZoom', eventData, function(event) { |
| event.preventDefault(); event.data.target.panZoom('mouseUp'); |
| }); |
| } |
| |
| if (settings.fit) { settings.fit.bind('click.panZoom', eventData, function(event) { event.preventDefault(); event.data.target.panZoom('fit'); } ); } |
| |
| // double click |
| if (settings.double_click) { |
| this.bind('dblclick.panZoom', eventData, function(event, delta) { event.data.target.panZoom('zoomIn') } ); |
| } |
| |
| // mousewheel |
| if (settings.mousewheel && typeof(this.mousewheel) == 'function') { |
| this.parent().mousewheel(function(event, delta) { event.preventDefault(); $(this).find('img').panZoom('mouseWheel', delta) } ); |
| } else if (settings.mousewheel) { |
| alert('Mousewheel requires mousewheel from jQuery tools - please include jQuery tools or disable mousewheel to remove this warning.') |
| } |
| |
| // direct form input |
| if (settings.directedit) { |
| $(settings.out_x1).add(settings.out_y1).add(settings.out_x2).add(settings.out_y2).bind('change.panZoom blur.panZoom', eventData, function(event) { event.data.target.panZoom('readPosition') } ); |
| } |
| |
| if (settings.draggable && typeof(this.draggable) == 'function') { |
| this.draggable({ |
| stop: function () { $(this).panZoom('dragComplete'); } |
| }); |
| } else if (settings.draggable) { |
| alert('Draggable requires jQuery UI - please include jQuery UI or disable draggable to remove this warning.') |
| } |
| |
| // image load |
| $(this).bind('load.panZoom', eventData, function (event) { event.data.target.panZoom('loadImage') }) |
| |
| } |
| |
| function setupData() { |
| this.data('panZoom', { |
| target_element: this, |
| target_dimensions: { x: null, y: null }, |
| viewport_element: this.parent(), |
| viewport_dimensions: { x: this.parent().width(), y: this.parent().height() }, |
| position: { x1: null, y1: null, x2: null, y2: null }, |
| last_image: null, |
| loaded: false, |
| mousewheel_delta: 0, |
| mousedown_interval: false |
| }); |
| if (settings.debug) { |
| console.log(this.data('panZoom')); |
| } |
| } |
| |
| function setupCSS() { |
| if (this.parent().css('position') == 'static') { |
| this.parent().css('position', 'relative'); |
| } |
| this.css({ |
| 'position': 'absolute', |
| 'top': 0, |
| 'left': 0 |
| }); |
| if (settings.draggable) { |
| this.css({ |
| 'cursor': 'move' |
| }); |
| } |
| } |
| |
| function validatePosition() { |
| var data = this.data('panZoom'); |
| // if dimensions are too small... |
| if ( data.position.x2 - data.position.x1 < settings.min_width/settings.factor || data.position.y2 - data.position.y1 < settings.min_height/settings.factor ) { |
| // and second co-ords are zero (IE: no dims set), fit image |
| if (data.position.x2 == 0 || data.position.y2 == 0) { |
| methods.fit.apply(this); |
| } |
| // otherwise, backout a bit |
| else { |
| if (data.position.x2 - data.position.x1 < settings.min_width/settings.factor) { |
| data.position.x2 = data.position.x1*1+settings.min_width/settings.factor; |
| } |
| if (data.position.y2 - data.position.y1 < settings.min_height/settings.factor) { |
| data.position.y2 = data.position.y1*1+settings.min_height/settings.factor; |
| } |
| } |
| } |
| |
| if (settings.aspect) { |
| target = data.target_dimensions.ratio; |
| current = getCurrentAspectRatio.apply(this) |
| if (current > target) { |
| new_width = getHeight.apply(this) * target; |
| diff = getWidth.apply(this) - new_width; |
| data.position.x1 = data.position.x1*1 + (diff/2); |
| data.position.x2 = data.position.x2*1 - (diff/2); |
| } else if (current < target) { |
| new_height = getWidth.apply(this) / target; |
| diff = getHeight.apply(this) - new_height; |
| data.position.y1 = data.position.y1*1 + (diff/2); |
| data.position.y2 = data.position.y2*1 - (diff/2); |
| } |
| } |
| |
| |
| } |
| |
| function applyPosition() { |
| var data = this.data('panZoom'); |
| |
| width = getWidth.apply(this); |
| height = getHeight.apply(this); |
| left_offset = getLeftOffset.apply(this); |
| top_offset = getTopOffset.apply(this); |
| |
| properties = { |
| 'top': Math.round(top_offset), |
| 'left': Math.round(left_offset), |
| 'width': Math.round(width), |
| 'height': Math.round(height) |
| } |
| |
| if (data.loaded && settings.animate) { |
| applyAnimate.apply(this, [ properties ]); |
| } else { |
| applyCSS.apply(this, [ properties ]); |
| } |
| |
| if (settings.debug) { |
| console.log('--'); |
| console.log('width:' + width); |
| console.log('height:' + height); |
| console.log('left:' + left_offset); |
| console.log('top:' + top_offset); |
| } |
| } |
| |
| function applyCSS() { |
| this.css( properties ); |
| } |
| |
| function applyAnimate() { |
| this.stop().animate( properties , settings.animate_duration, settings.animate_easing); |
| } |
| |
| function getWidth() { |
| var data = this.data('panZoom'); |
| width = (data.position.x2 - data.position.x1); |
| return width; |
| } |
| |
| function getLeftOffset() { |
| var data = this.data('panZoom'); |
| return data.position.x1; |
| } |
| |
| function getHeight() { |
| var data = this.data('panZoom'); |
| height = (data.position.y2 - data.position.y1); |
| return height; |
| } |
| |
| function getTopOffset() { |
| var data = this.data('panZoom'); |
| top_offset = data.position.y1; |
| return top_offset; |
| } |
| |
| function getCurrentAspectRatio() { |
| return (getWidth.apply(this) / getHeight.apply(this)); |
| } |
| |
| function writePosition() { |
| var data = this.data('panZoom'); |
| if (settings.out_x1) { settings.out_x1.val(Math.round(data.position.x1 / settings.factor)) } |
| if (settings.out_y1) { settings.out_y1.val(Math.round(data.position.y1 / settings.factor)) } |
| if (settings.out_x2) { settings.out_x2.val(Math.round(data.position.x2 / settings.factor)) } |
| if (settings.out_y2) { settings.out_y2.val(Math.round(data.position.y2 / settings.factor)) } |
| } |
| |
| function getStepDimensions() { |
| var data = this.data('panZoom'); |
| ret = { |
| zoom: { |
| x: (settings.zoom_step/100 * data.viewport_dimensions.x), |
| y: (settings.zoom_step/100 * data.viewport_dimensions.y) |
| }, |
| pan: { |
| x: (settings.pan_step/100 * data.viewport_dimensions.x), |
| y: (settings.pan_step/100 * data.viewport_dimensions.y) |
| } |
| } |
| return ret; |
| } |
| |
| function loadTargetDimensions() { |
| var data = this.data('panZoom'); |
| var img = document.createElement('img'); |
| img.src = this.attr('src'); |
| img.id = "jqpz-temp"; |
| $('body').append(img); |
| data.target_dimensions.x = $('#jqpz-temp').width(); |
| data.target_dimensions.y = $('#jqpz-temp').height(); |
| $('#jqpz-temp').remove(); |
| data.target_dimensions.ratio = data.target_dimensions.x / data.target_dimensions.y; |
| } |
| |
| })( jQuery ); |