example17.php HOME Examples overview Download Ask a question

AJAX-ZOOM - short tutorial PHP

This example can be seen a short tutorial on how you could quickly define one or more images and embed AJAX-ZOOM into your application with PHP. Although it is possible to use some PHP class methods to launch AJAX-ZOOM it is not the preferred way. Please note that all the other examples without PHP code can be inserted into a PHP or template file...

Do not use this example. It is depreciated and will be replaced. Other than that you cannot trigger AJAX-ZOOM responsive with the below code. Please see short tutorial - JAVASCRIPT (example26.php) for better implementation.


AJAX-ZOOM is a powerful jQuery based library for displaying high-resolution images and 360° / 3D spins.
Pan toolZoom rectangle toolZoom outZoom in
Move to the leftMove upMove downMove to the right
Reset to initial size
Show / hide mapHelpOpen in fullscreen mode

By passing / defining the query string parameter $_GET['example'] = 20; (in source code) some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 20){ So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;

Thus in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 20){ you could for example set:

JavaScript & CSS files in Head

<!--  Include jQuery core into head section -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!--  Include AJAX-ZOOM javascript && css, adjust the path if needed. Best set absolute path -->
<link rel="stylesheet" href="../axZm/axZm.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

PHP code in body

	// Create empty array
	$zoomData = array();
	// Add images to the array
	$zoomData[1] = '/pic/zoom/boutique/boutique_007.jpg';
	$zoomData[2] = '/pic/zoom/boutique/boutique_019.jpg';
	$zoomData[3] = '/pic/zoom/animals/animals_016.jpg';
	$zoomData[4] = '/pic/zoom/objects/objects_001.jpg';
	$zoomData[5] = '/pic/zoom/portrait/portrait_005.jpg';
	$zoomData[6] = '/pic/zoom/trasportation/transportation_001.jpg';
	$zoomData[7] = '/pic/zoom/trasportation/transportation_014.jpg';
	$zoomData[8] = '/pic/zoom/trasportation/transportation_015.jpg';
	$zoomData[9] = '/pic/zoom/trasportation/transportation_016.jpg';
	$zoomData[10] = '/pic/zoom/trasportation/transportation_021.jpg';
	$zoomData[11] = '/pic/zoom/trasportation/transportation_022.jpg';
	$zoomData[12] = '/pic/zoom/estate/house_01.jpg';
	$zoomData[13] = '/pic/zoom/estate/house_02.jpg';
	$zoomData[14] = '/pic/zoom/estate/house_03.jpg';
	// Turn above array into string
	$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
	// Select a set of custom settings in zoomConfigCustom.inc.php
	$_GET['example'] = 20; 
	// Include all classes etc.
	require ('../axZm/zoomInc.inc.php');
	// Html output
	echo $axZmH->drawZoomBox($zoom, $zoomTmp);
	// JS config parameters from zoomConfig.inc.php and zoomConfigCustom.inc.php
	echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
	// JS code as string, which is not very convenient...
	$azCallbacks = '{onLoad: function(){}}';
	// JS load AJAX-ZOOM
	echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true, $azCallbacks);	

Comments (2)

Vadim Jacobi 2015-03-17 23:14:20
Vadim Jacobi Yes, you might want to use this example instead: http://www.ajax-zoom.com/examples/example26.php
J B 2015-03-17 23:09:30
J B Hello,
Is there anothere solution for this :
$azCallbacks = '{onLoad: function(){}}';
May causes troubles for me ;

Thanks in advance

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.