AJAX-ZOOM short tutorial PHP

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...

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:

$zoom['config']['picDim'] - inner size of the player.
$zoom['config']['useHorGallery'] - enable / disable horizontal gallery.
$zoom['config']['useGallery'] - enable / disable vertical gallery.
$zoom['config']['displayNavi'] - enable / disable navigation bar.
$zoom['config']['innerMargin'] - border width around the player.
and many others...

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

	<?php
	// 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);	
	
	?>