previous exampleHome
next example

AJAX-ZOOM - short tutorial 2

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

Head Stylesheets and JS files:

			<!-- Include css for AJAX-ZOOM --> 
			<link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
	
			<!-- Include jQuery and AJAX-ZOOM javascripts --> 
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
		

Body PHP:

			// Select a set of custom settings in zoomConfigCustom.inc.php
			$_GET['example'] = 20; 
			
			// Define the images directly here
			// There can be just one or more...
			$zoomData = array();
			
			$zoomData[1]['p'] = '/pic/zoom/animals/'; // Path to image
			$zoomData[1]['f'] = 'test_animals1.png'; // Image filename
			
			$zoomData[2]['p'] = '/pic/zoom/animals/';
			$zoomData[2]['f'] = 'test_animals2.png';
	
			$zoomData[3]['p'] = '/pic/zoom/boutique/';
			$zoomData[3]['f'] = 'test_boutique1.png';
	
			$zoomData[4]['p'] = '/pic/zoom/boutique/';
			$zoomData[4]['f'] = 'test_boutique2.png';
			
			$zoomData[5]['p'] = '/pic/zoom/boutique/';
			$zoomData[5]['f'] = 'test_boutique3.png';
	
			$zoomData[6]['p'] = '/pic/zoom/estate/';
			$zoomData[6]['f'] = 'test_estate1.png';
	
			$zoomData[7]['p'] = '/pic/zoom/estate/';
			$zoomData[7]['f'] = 'test_estate2.png';
			
			$zoomData[8]['p'] = '/pic/zoom/estate/';
			$zoomData[8]['f'] = 'test_estate3.png';	
	
			$zoomData[9]['p'] = '/pic/zoom/random/';
			$zoomData[9]['f'] = 'test_random1.png';
	
			$zoomData[10]['p'] = '/pic/zoom/random/';
			$zoomData[10]['f'] = 'test_random2.png';
			
			$zoomData[11]['p'] = '/pic/zoom/random/';
			$zoomData[11]['f'] = 'test_random3.png';	
		
			// Turn above array into string
			$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
			
			// 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 load AJAX-ZOOM
			echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true);
		
MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom