Zooming into a predefined image area is very simple. All you need to know are the coordinates of the edges in the original image: x1, y1 (top left corner) and x2, y2 (bottom right corner). You will then need to pass this coordinates to the method jQuery.fn.axZm.zoomTo() and bind the method to any event:
<a href='#' onClick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, x2: 3424, y2: 2210, motion: 'easeOutBack', motionZoomed: 'easeOutSine', speed: 1500, speedZoomed: 750}); return false;">Lamp</a>
Alternatively of knowing the coordinated of the edges in the original image you can also pass the coordinates of the edges in the initial image. Doing so you must additionally set the option parameter "initial: true". Since this coordinates depend on the image size of the initial image, e.g. '480x360', changing this size would produce unpredicted results. It is therefore recomended to use the first method with the coordinated in the original sizes image.
<a href='#' onClick="jQuery.fn.axZm.zoomTo({x1: 167, y1: 107, x2: 221, y2: 143, initial: true}); return false;">Lamp</a>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\">
<head>
<!-- jQuery is not required, as it will be initialized by the axZm.loader.js -->
</head>
<body>
<div id="test">This text will be replaced after AJAX-ZOOM is loaded</div>
<script type="text/javascript">
var ajaxZoom = {}; // New object
ajaxZoom.path = "../axZm/"; // Path to the axZm folder
ajaxZoom.parameter = "zoomFile=bedroom_3d.jpg&zoomDir=furniture&example=13"; // Your custom parameter
ajaxZoom.divID = "test"; // The id of the ellement where ajax-zoom has to be inserted into
</script>
<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
</body>
</html>
|
See AJAX-ZOOM in action on
Magento
Integration quide |
|
See AJAX-ZOOM in action on
xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide |
|
See AJAX-ZOOM in action on
Oxid eSales
Integration quide |
| More comming soon... |
| Name (required): |  | |
| Email (required): | ||
| Website: |
|
Your comment (no html): | |
| Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment. | |
