This example shows the basics of AJAX-ZOOM $.fn.axZm.zoomTo API and dynamic crop generation. With this basics one can develop more sophisticated applications for front as well as backend usage. For developers we also recommend to visit example14.php to get an overview about various callbacks provided by AJAX-ZOOM.
If you are looking for a fast way to create a simple gallery with zooming to a specified image area, then please proceed to image crop editor (example35.php) where you will be able to create and save (thus beeing able to reproduce) such a gallery within 30 seconds. This image crop configurator can work with single images, AJAX-ZOOM galleries, 360 and 3D multirow animations.
| jQuery.fn.axZm.zoomTo test basic parameters | |||||
|---|---|---|---|---|---|
| Coordinates: | x1: | y1: | x2: | y2: | |
| zoomLevel: | % | ||||
| speed: | ms | ||||
| motion: | |||||
| Retrieve x1, y1, x2, y2 | |||||
| Original image: | x1: | y1: | x2: | y2: | |
AJAX-ZOOM has API to create thumbnails (sort of screenshots) of zoomed image on-the-fly. This feature can be generally disabled and has many parameters which can be adjusted.
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='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. With the additional property "zoomLevel" you can adjust the final level of zoomed area.
<a href='javascript: void(0)' onclick="jQuery.fn.axZm.zoomTo({x1: '40%', y1: '60%', zoomLevel: '75%'}); return false;">Zoom to point</a>For the three tests following simple functions are used:
| Option | Type | Description |
|---|---|---|
| x1 | int|string |
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 |
| x2 | int|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 | You custom callback function. |