animalsboutiqueeroticestatefashionfurniturehigh_resobjectsportraitrandomtrasportationworld - Switch folder with AJAX

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			
			// Simulate dynamic configuration
			$_GET['example'] = 9;
			
			// Simulate custom parameters
			if (!isset($_GET['zoomDir'])){
				$_GET['zoomDir'] = 5;
				$_GET['zoomID'] = 13;
			}
			
			// Include the ajax zoom class and all needed php files
			require ("../axZm/zoomInc.inc.php");
			
			// This file (example8.php) is also used as ajax request target for the custom gallery outside the ajax zoom
			// An other words when the user clicks on a thumb to the right the file loads itself :-)
			if ($_GET['newGal']){
				foreach ($zoom['config']['pic_list_array'] as $k=>$v){
					echo "<a href=\"#\" class=\"outerContainer\" 
					onClick=\"jQuery.fn.axZm.zoomSwitch('$k'); return false;\">
					<DIV class=\"outerimg\" 
					style=\"background-image: url(".$axZmH->composeFileName($zoom['config']['gallery'].$v,$zoom['config']['galleryFullPicDim'],'_').") \">
					</DIV></a>";
				}
				
				// The above loop is the only information needed, so exit here...
				exit;
			}
		

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="/axZm/plugins/jquery-1.6.2.js"></script>
			<script type="text/javascript" src="/axZm/jquery.axZm.js"></script>
		

Head Stylesheets and JS files:

			<script type="text/javascript">
				
				// Example function to load custom gallery over ajax
				function loadNewGal(id){
					jQuery.ajax({
						url: '<?php echo $_SERVER['PHP_SELF'];?>',
						data: 'zoomDir='+id+'&newGal=1',
						success: function (data){
							jQuery('#picThumbs').html(data);
						}
					});		
				}
				
				// The above function is triggered after page is loaded
				jQuery(window).load(function () {
					// Init the gallery
					loadNewGal(<?php echo $_GET['zoomDir'];?>);
				});
			
			</script>
		

Body PHP:

			// Returns the html for ajax zoom
			echo $axZmH->drawZoomBox($zoom, $zoomTmp);
			
			// Returns dynamic javascript for ajax zoom
			echo $axZmH->drawZoomJsConf($zoom, $rn = false, $pack = true);
			
			// Returns javascript loader that triggers ajax zoom
			echo $axZmH->drawZoomJsLoad($zoom, $pack = true, $windowLoad = true);
			echo "</DIV>";
	
			/*
			// Clickable list of folders (can be any other parameter)
			echo "<ul>";
			foreach ($zoomTmp['folderArray'] as $k=>$v){
				echo "<a href='#' onClick=\"jQuery.fn.axZm.loadAjaxSet('example=".$_GET['example']."&zoomDir=$k'); loadNewGal($k); return false;\">$v</a> ";
			}
			echo "</ul>";
			*/
			
			echo "<div style='margin-bottom:10px'>";
				echo "<select onChange=\"jQuery.fn.axZm.loadAjaxSet('example=".$_GET['example']."&zoomDir='+this.value); loadNewGal(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";
			echo "</div>";
	
			echo "<DIV id='picThumbs'></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