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

jQuery Image Zoom & Pan Gallery

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);
		

Modules & Plugins Ecommerce

	See AJAX-ZOOM in action on Magento Integration quide
	See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4) Integration quide
	See AJAX-ZOOM in action on Oxid eSales Integration quide
	See AJAX-ZOOM in action on hybris multichannel commerce (no php)
	More coming soon...

Compatibility

6.0+

2.0+

2.0+

1.0+

9.5+

2.0+

4.0+

Pinch zoom, tap zoom, swipe

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:

Your comment (no html):
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.	Add Comment