previous exampleHome
next example

AJAX-ZOOM - embedded implementation

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 core -->
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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){
					// Get the folder name
					var folder = jQuery(menuItem).attr("data-folder");
					
					if (folder){
						// Generate your custom parameters query string, in this case a directory
						var data = "example=<?php echo $_GET["example"];?>&zoomDir="+folder;
						
						// 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>";
			
		
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