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

Modules & Plugins Ecommerce

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...
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.
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