General: sometimes designers have the need for very simple image zoom feature with extended styling possibilities. Above is an example of AJAX-ZOOM with only basic features enabled.

Loading in a lightbox: if you want to show this content in a lightbox, e.g. as an iframe the $zoomData array (see below) needs to be defined in the page from where the lightbox is inited. For demonstration this page has been prepared to strip all unneeded html.

Toolbar: in this example the "native" toolbar is completly disabled. Instead there is a custom div container with some icons in it. Each icon has an onclick event with api function like jQuery.fn.axZm.zoomIn() or jQuery.fn.axZm.zoomOut(). After AJAX-ZOOM is loaded this div container is appended to and positioned inside AJAX-ZOOM with the help of the "onLoad" callback.

Image map: unlike in most other examples the image map is positioned outside of AJAX-ZOOM player. This can be done with the option "mapParent" in /axZm/zoomConfig.inc.php or zoomConfigCustom.inc.php; "mapParent" defines the ID of an block element e.g. a DIV on the page. The size of the map is controlled by the option "mapFract".

PHP part - define the images:

			<?php
			// Create an array with images
			$zoomData[1]['p'] = '/pic/zoom/fashion/';
			$zoomData[1]['f'] = 'test_fashion1.png';
			
			$zoomData[2]['p'] = '/pic/zoom/fashion/';
			$zoomData[2]['f'] = 'test_fashion3.png';
		
			$zoomData[3]['p'] = '/pic/zoom/fashion/';
			$zoomData[3]['f'] = 'test_fashion2.png';
		
			$zoomData[4]['p'] = '/pic/zoom/fashion/';
			$zoomData[4]['f'] = 'test_fashion4.png';
			
			// Turn PHP array into string
			$_GET['zoomData'] = strtr(base64_encode(addslashes(gzcompress(serialize($zoomData),9))), '+/=', '-_,');
			?>
		

Javascript part:

			<script type="text/javascript">
			// Create new object
			var ajaxZoom = {};
			
			// Callback functions
			ajaxZoom.opt = {
				onLoad: function(){
					// Hilight one of the thumbs
					jQuery("#thumb_"+jQuery.axZm.zoomID).css("borderColor", "blue");
					
					// Append custom toolbar to AJAX-ZOOM
					jQuery("#naviReplacement").appendTo("#zoomLayer").css({
						display: "block",
						left: 10,
						bottom: 10,
						zIndex: 111
					});
				},
				onImageChange: function(info){
					// Hilight selected thumb
					jQuery(".outerContainer").css("borderColor", "black");
					jQuery("#thumb_"+info.zoomID).css("borderColor", "blue");
				}
			};
			
			// Path to axZm folder
			ajaxZoom.path = "../axZm/";
			
			// Define your custom parameter query string
			// By example=18 some settings are overridden in zoomConfigCustom.inc.php
			// zoomData is the php array with images turned into string
			ajaxZoom.parameter = "zoomData=<?php echo $_GET["zoomData"]?>&example=18&zoomID=1"; 
			
			 // The ID of the element where ajax-zoom has to be inserted into
			ajaxZoom.divID = "test"; 
			</script>
			
			<!-- Include the loader file -->
			<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
		

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

MORE EXAMPLES