example9.php HOME Overview (index.php) Buy / Download Ask a question

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

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.

Loading, please wait..
jQuery.fn.axZm.zoomTo test basic parameters
Coordinates: x1: y1: x2: y2:
zoomLevel: %
speed: ms
Retrieve x1, y1, x2, y2
Original image: x1: y1: x2: y2:
Area for thumbnails

Make crop / thumbnail

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.

Zoom with the above tools or in the player and press the button below to test.

Some code

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:

jQuery.fn.axZm.zoomTo (options)

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 You custom callback function.
Load other examples in slider