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.
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.
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.
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.
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:
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.
Following simple to understand functions are used to build the zooming test-tool above:
Top-left x coordinate as integer or percentage, e.g. '40%' as string; |
You should provide y1 coordinate too;
If you do not provide x2 and y2 coordinates AJAX-ZOOM will take x1 and y1 coordinates as the middle point to where it should zoom which is very conveninent in some cases.
The level of zoom is supplied by zoomLevel option, see below.
|y1||int|string||Top-left y coordinate as integer or percentage, e.g. '40%' as string|
Bottom-right x coordinate as integer or persentage e.g. '60%' as string; |
If you provide x2 coordinates you have to provide y2 coordinates too;
So by providing x1, y1, x2 and y2 you specify a rectangle for zoomTo;
It is ok when the proportion of these rectangle does not math the proportions of the player / viewing area which would happen for responsive AJAX-ZOOM implementation anyway.
|y1||int|string||Bottom-right y coordinate as integer or percentage, e.g. '60%' as string|
|zoomLevel||float||Desired zoom level (percent) if only x1 and y1 coordinates are proveded, e.g. 50; 100 is zoom at max.|
|motion||string||Type of easing used when initially the image is not zoomed.|
|motionZoomed||string||Type of easing if the image is already zoomed.|
|speed||int||Speed in ms of transition if image is not zoomed.|
|speedZoomed||int||Speed in ms of transition if image is zoomed.|
|initial||bool||If set to true, all coordinates will be regarded as coordinates of the not zoomed state of AJAX-ZOOM player. Default: false|
|ajxTo||int||Time after which the zoom should get sharp (load tiles) Default: 1000|
|callback||function||Your custom callback function.|