This example demonstrates how to ebmed an AJAX-ZOOM gallery into your html. It also demonstrates how to load a different set of pictures into the gallery from outside of AJAX-ZOOM with the function jQuery.fn.axZm.loadAjaxSet(data). data is simply a string with your parameters that are passed to zoomObjects.inc.php in order to generate an array with images, e.g. zoomDir=abc

The double lined border with the shadow is just a background of the DIV, where AJAX-ZOOM is loaded into.

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION["imageZoom"]);
			$_SESSION["imageZoom"]=array();
			
			// Simulate custom parameters
			$_GET["example"] = 8;
			$_GET["zoomDir"] = "boutique";
			$_GET["zoomFile"] = "watch_2.jpg";
			
			// Contains all needed classes and other files
			require ("../axZm/zoomInc.inc.php");
		

Head Javascript and CSS:

			<!-- Include the AJAX-ZOOM CSS file directly -->
			<link rel="stylesheet" href="/axZm/axZm.css" type="text/css" media="screen">
			
			<!-- Include the lavalamp menu CSS (just for this demo) -->
			<link rel="stylesheet" href="/axZm/plugins/demo/lavalamp/lavalamp_test.css" type="text/css" media="screen">
			
			<!-- Include jQuery (could also be 1.3.2) -->
			<script type="text/javascript" src="/axZm/plugins/jquery-1.6.2.min.js"></script>
			
			<!-- Include AJAX-ZOOM Javascript, all other requeired plugin's will be loaded instantly -->
			<script type="text/javascript" src="/axZm/jquery.axZm.js"></script>
			
			<!-- Include lavalamp menu Javascript (just for this demo) -->
			<script type="text/javascript" src="/axZm/plugins/demo/lavalamp/jquery.lavalamp.js"></script>
		

Head Javascript custom function:

			<script type="text/javascript">
				
				// This function is a custom one just for this example
				function submitNewZoom(menuItem){
					// Filter the needed value from id attribute
					var id = jQuery(menuItem).attr("id").split("zoomSet").join("");
					
					if (id){
						// Generate your custom parameters query string, in this case a directory
						var data = "example=<?php echo $_GET["example"];?>&zoomDir="+id;
						
						// Pass it to PHP
						jQuery.fn.axZm.loadAjaxSet(data);
					}	
				}
				
				jQuery(window).load(function () {
					jQuery("#lavalampMenu").lavaLamp({
						fx: "easeOutBack",
						speed: 750,
						click: function(event, menuItem) {
							submitNewZoom(menuItem); // Watch above!
							return false;
						}
					});
				});
				
			</script>
		

Body PHP:

			// This div is just for the background image
			echo "<DIV style='margin: 20px 0px 0px 0px; padding: 6px; background-image: url(/axZm/icons/back_inline.png); background-repeat: no-repeat;'>";
				
				// Include (print) AJAX-ZOOM html
				echo $axZmH->drawZoomBox($zoom, $zoomTmp);
				
				// Include (print) AJAX-ZOOM javascript
				echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
				echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true);
				
			echo "</DIV>";
			
			// This div is just for the background image
			echo "<DIV style='background-image: url(/axZm/icons/back_lava.png)'>";
				
				echo "<ul class='lavaLampNoImageZoom' id='lavalampMenu'>";
				
				// Loop through in zoomObjects.inc.php generated array with folders
				foreach ($zoomTmp['folderArray'] as $k=>$v){
					
					// Hide the key of the php folders array in the id attribut of the li tag (menu item)
					// This key will be extracted by submitNewZoom() custom js function above
					echo "<li id='zoomSet".$k."'";
					
					// Find the selected (current) menu item
					if ($k == $_GET['zoomDir'] OR $v == $_GET['zoomDir']){
						echo " class='current'";
					}
					
					echo "><a href='#'>".$v."</a></li>";
				}
				
			echo "</ul></DIV>";
			
		

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
	More comming soon...

Comments (0)

Leave a Comment