init
This commit is contained in:
@@ -0,0 +1,467 @@
|
||||
/*
|
||||
* 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 );
|
||||
Reference in New Issue
Block a user