It appears that the plugin utilizes an animation loop which repeatedly calls a _render() function to manage zooming and panning of the held images. This render function is called continuously - possibly several times per second:
function _render() {
for (var i = 0, count = $instances.length; i < count; i++) {
var data = $instances.eq(i).data("zoomer");
if (typeof data === "object") {
// Update image and position values
data = _updateValues(data);
data.lastAction = data.action;
// Update DOM
if (transformSupported) {
var scaleX = data.imageWidth / data.naturalWidth,
scaleY = data.imageHeight / data.naturalHeight;
data.$positioner.css(_prefix("transform", "translate3d(" + data.positionerLeft + "px, " + data.positionerTop + "px, 0)"));
data.$holder.css(_prefix("transform", "translate3d(-50%, -50%, 0) scale(" + scaleX + "," + scaleY + ")"));
} else {
data.$positioner.css({
left: data.positionerLeft,
top: data.positionerTop
});
data.$holder.css({
left: data.imageLeft,
top: data.imageTop,
width: data.imageWidth,
height: data.imageHeight
});
}
// Run callback function
if (data.callback) {
data.callback.apply(data.$zoomer, [
(data.imageWidth - data.minWidth) / (data.maxWidth - data.minWidth)
]);
}
}
}
}
The _render() function relies on properties such as data.imageWidth and data.imageHeight to determine the image size in each animation cycle. These properties are defined by data.targetImageWidth and
data.targetImageHeight</code. The plugin gradually adjusts the width/height properties towards the targetWidth/targetHeight properties to achieve the animation effect.</p>
<p>To understand how the plugin functions, try setting a breakpoint at this line within <code>_render()
:
var scaleX = data.imageWidth / data.naturalWidth,
Then experiment with different values for imageWidth, imageHeight, targetImageWidth, and
targetImageHeight</code using the javascript console. You can observe the behavior of the plugin.</p>
<p>If you wish to create a 'reset' button, you will need to modify the <code>data
object of the zoom plugin programmatically instead of directly manipulating the css. Consider downloading and extending the plugin's source code, focusing on the
controls object under
options:
var options = {
callback: $.noop,
controls: {
position: "bottom",
zoomIn: null,
zoomOut: null,
next: null,
previous: null
},
customClass: "",
enertia: 0.2,
increment: 0.01,
marginMin: 30, // Min bounds
marginMax: 100, // Max bounds
retina: false,
source: null
};