AJAX-ZOOM - $.fn.axZm.zoomTo() demo + zoom & crop basics and demo for developers

This example is mainly for developers looking to create custom functionality using AJAX-ZOOM.

It is a demonstration of the AJAX-ZOOM $.fn.axZm.zoomTo API method. As the name of the method suggests, it lets you zoom to a part of an image by defining x1, y1, x2, and y2 coordinates via JavaScript. You can also zoom to certain x1, y1 values and define the zoom level.

With the help of a different method, explained in this example, you can inversely get the coordinates of the zoomed image viewport (visible area).

The example also shows how to create thumbnails from the viewport of the viewer or any other cropping coordinates of an image.

Make crop / thumbnail

AJAX-ZOOM has an API to create snapshots of areas of an image, save them as thumbnails or return as blob data. You can disable this functionality completely or restrict by many parameters.

Zoom with the above tools or in the player and press the "create crop" button above to test. It will create a thumbnail of the viewport. The API, however, is capable of creating the thumbnails by coordinates and not just the viewport.

Alternatives

If you are looking for a ready to use solution for creating a gallery with thumbnails and zooming to a designated image area on click, you should proceed to the image crop editor (example35.php). There, you can create and save (thus being able to reproduce) such a gallery immediately. The editor works with single high-resolution images, a set of images, 360 object views, and 3D multi-row views.

As a developer, you can easily integrate this editor into the administrator backend of any established CMS system or cart software via iframe and setup the GET and PUT actions via AJAX controller. The code of the editor features variables that you only need to configure for connecting the editor to your system. You can find the variables at the top section of the configuration file. It is inline within PHP code.

Some code

Zooming into a predefined area of an image 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). Then, you pass these coordinates to the AJAX-ZOOM $.fn.axZm.zoomTo method or bind it to any event:

			<a href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomTo({x1: 2584, y1: 1650, x2: 3424, y2: 2210, motion: 'easeOutBack', motionZoomed: 'easeOutSine', speed: 1500, speedZoomed: 750}); return false;">Zoom to rect</a>			

You can also zoom to a certain point knowing only the x1 and y1 coordinates or even define x1 and y1 as percentage values. With the additional property zoomLevel, you can set the zoom level of the viewport. When defining the zoom level, it is crucial to understand that the final result depends on the size of the viewer and the size of the original image. AJAX-ZOOM does not zoom more, than 100% of the original image size. For example, if the viewport is larger than the actual image, calling $.fn.axZm.zoomTo does not do anything. In that case, the image is not zoomable at all.

			<a href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomTo({x1: '40%', y1: '60%', zoomLevel: '75%'}); return false;">Zoom to point</a>			

Easily understandable functions used to build the zooming test-tool above

jQuery.fn.axZm.zoomTo (options)