previous exampleHome
next example

AJAX-ZOOM - embed with custom loader, jQuery.axZm.zoomTo() demo

Photo by: Carsten Klein
Original image: x1: y1: x2: y2:
Initial image: x1: y1: x2: y2:
  

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>

Embed AJAX-ZOOM with custom loader:

				<!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>
				
MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom