- Fancybox - Colorbox

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

To keep things not to complicated - following is a simplified version of the actual code. In order to change the thubnails over a dropdown or any other kind of menu with AJAX there is an additional javascript function and logic necessary. For complete solution please take a look at the original sourcecode (PHP) of this example!

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			$noObjectsInclude = true;
			
			$_GET["example"] = 2;
			$_GET["zoomDir"] = 'trasportation';
			
			require ('../axZm/zoomInc.inc.php');
	
			/**
			  * This function returns 
			  * @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(".$axZmH->composeFileName($zoom['config']['gallery'].$v,$zoom['config']['galleryFullPicDim'],'_').");'>";
						$return .= "<a class='thumbDemoLink' href=\"/axZm/zoomLoad.php?zoomLoadAjax=1&zoomID=".$k."&zoomDir=".$_GET['zoomDir']."&example=".$_GET['example']."\"><img src='".$zoom['config']['icon']."empty.gif' class='thumbDemoImg' border='0'></a>";
						$return .= "</DIV>";
					$return .= "</DIV>";
				}			
				return $return;
			}
		

Head CSS:

			.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">
			function setFancyBox(){
				jQuery(".thumbDemoLink").unbind().fancybox({
				padding				: 0,
				overlayShow			: true,
				overlayOpacity		: 0.6,
				zoomSpeedIn			: 0,
				zoomSpeedOut		: 100,
				easingIn			: 'swing',
				easingOut			: 'swing',
				hideOnContentClick	: false, // important
				centerOnScroll		: true,
				imageScale			: true,
				autoDimensions		: 'true',
				callbackOnShow		: function(){
					jQuery.fn.axZm();
					// Needs this var only for demo with changing dirs...
					jQuery.zoomLightbox =  'fancybox';
				}
				});
			}
			
			jQuery(document).ready(function() {
				setFancyBox();
			});
		</script>
		

Body PHP:

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