animalsboutiqueeroticestatefashionfurniturehigh_resobjectsportraitrandomtrasportationworld - Switch folder with AJAX (can be any other custom parameter(s))

The original sourcecode (PHP) of this example is in the download package.

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			
			$_GET['example'] = 2;
			
			if (!isset($_GET['zoomDir'])){
				$_GET['zoomDir'] = 'animals';
			}else if(isset($_GET['zoomDir']) AND !isset($_GET['previewPic'])){
				$getDir=1;
			}
			
			require ('../axZm/zoomInc.inc.php');
			
			/**
			  * @param array $pic_list_array Array with images
			  * @param array $zoom Configuration array
			  * @return onject $axZmH Class instance
			  **/
			 
			function zoomThumbs($pic_list_array, $zoom, $axZmH){
				$return = '';
				foreach ($pic_list_array as $k=>$v){
					$return .= "<DIV class='thumbDemoBack'>";
						$return .= "<DIV class=\"thumbDemo\" style='background-image:url(".$_SERVER['PHP_SELF'].'?zoomDir='.$_GET['zoomDir'].'&example='.$_GET['example'].'&previewPic='.$v.");'>";
						$return .= "<a class=\"thumbDemoLink\" onClick=\"jQuery.fn.axZm.openFullScreen('/axZm/', 'zoomID=".$k."&zoomDir=".$_GET['zoomDir']."&example=".$_GET['example']."', 'window', true);\" href=\"javascript: void(0)\"><img src='".$zoom['config']['icon']."empty.gif' class='thumbDemoImg' border='0'></a>";
						$return .= "</DIV>";
					$return .= "</DIV>";
				}			
				return $return;
			}
			
			// On the fly generation of thumbs
			if (isset($_GET['previewPic'])){
				ob_start();
				$path = $zoom['config']['picDir'];
			
				$w = 100;
				$h = 100;
				$fillThumb = false;
				
				$ww = $w;
				$hh = $h;
				
				if ($fillThumb){
					$ratio = 1;
					$imgSize = getimagesize($path.urldecode($_GET['previewPic']));
					if ($imgSize[0] > $imgSize[1]){
						$ratio = $imgSize[0] / $imgSize[1];
					} elseif ($imgSize[1] > $imgSize[0]){
						$ratio = $imgSize[1] / $imgSize[0];
					}
					$ww = $ww * $ratio;
					$hh = $hh * $ratio;
				}
				
				if ($axZmH->isValidPath($path)){
					$axZm->rawThumb($zoom, $path, urldecode($_GET['previewPic']), round($ww), round($hh), 90, true);
				}
				ob_end_flush();
				exit;
			}
			
			// Return the thumbs list
			if ($getDir){
				echo zoomThumbs($pic_list_array, $zoom, $axZmH);
				exit;
			}
		

Head CSS:

			<link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
			.thumbDemoBack {
				float: left; 
				width: 142px; 
				height: 139px; 
				margin-bottom: 5px; 
				margin-right: 7px;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: url(/axZm/icons/thumb_back.png);
				overflow: hidden;
			}
			.thumbDemo {
				width: 100px; 
				height: 100px; 
				margin-left: 21px;
				margin-top: 20px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			.thumbDemoImg {
				width: 100px;
				height: 100px;
			}
			.thumbDemoLink{
			
			}
		

Head Javascript:

		<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>
	
		<script type="text/javascript">
			function changeDir(dir){
				jQuery.ajax({
					url: '<?php echo $_SERVER['PHP_SELF'];?>',
					data: 'zoomDir='+dir,
					cache: false,
					success: function (data){
						jQuery('#galDiv').html(data);
					}
				});		
			}
		</script>
		

Body PHP:

			// Select list with folders to choose from
			echo "<select onChange=\"changeDir(this.value)\">";
			foreach ($zoomTmp['folderArray'] as $k=>$v){
				echo "<option value='$k'";
				if (isset($_GET['zoomDir'])){
					if ($_GET['zoomDir']== $k) OR $_GET['zoomDir']== $v){
						echo ' selected';
					}
				}
				echo ">$v</option>";
			}
			echo "</select> - Switch folder with AJAX (can be any other custom parameter(s))";
			
			// Reeturn thumbs
			echo zoomThumbs($pic_list_array, $zoom, $axZmH);
		

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