previous exampleHome
next example

AJAX-ZOOM - embedded implementation, jQuery.fn.axZm.zoomSwitch() and jQuery.fn.axZm.loadAjaxSet() demonstration

With the method jQuery.fn.axZm.zoomSwitch() it is posiible to switch to a different picture from outside of ajax zoom. With the method jQuery.fn.axZm.loadAjaxSet() it is possible to load a different set of images. Combining this two methods together you can build an extended ajax gallery around the zoom with virtually unlimited number of images!

- Switch folder with AJAX
External controls example: zoomIn | zoomOut | reset

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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>";
		
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