example9.php HOME Examples overview Download Ask a question / privacy policy / imprint
example11.php

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.

Loading, please wait..
$.fn.axZm.zoomTo - test basic parameters
Coordinates: x1: y1: x2: y2:
zoomLevel: %
speed: ms
motion:
   
$.fn.axZm.getCropValues - retrieve x1, y1, x2, y2
Original image: x1: y1: x2: y2:
 
Area for thumbnails

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>

Following simple to understand functions are used to build the zooming test-tool above:

jQuery.fn.axZm.zoomTo (options)

OptionTypeDescription
x1int|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.
y1int|stringTop-left y coordinate as integer or percentage, e.g. '40%' as string
x2int|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.
y1int|stringBottom-right y coordinate as integer or percentage, e.g. '60%' as string
zoomLevelfloat Desired zoom level (percent) if only x1 and y1 coordinates are proveded, e.g. 50; 100 is zoom at max.
motionstring Type of easing used when initially the image is not zoomed.
motionZoomedstring Type of easing if the image is already zoomed.
speedint Speed in ms of transition if image is not zoomed.
speedZoomedint Speed in ms of transition if image is zoomed.
initialbool If set to true, all coordinates will be regarded as coordinates of the not zoomed state of AJAX-ZOOM player. Default: false
ajxToint Time after which the zoom should get sharp (load tiles) Default: 1000
callbackfunction Your custom callback function.

Comments (0)

Leave a Comment

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.
Load other examples in slider