- Fancybox - Colorbox

Head PHP:

			if(!session_id()){session_start();}
			unset ($_SESSION['imageZoom']);
			$_SESSION['imageZoom']=array();
			
			// Simulate initial values for demo
			$_GET['example'] = 2; // layout
			$_GET['zoomDir'] = 2; // folder with images
			
			// Contains all needed classes and other files
			require ("../axZm/zoomInc.inc.php");
		

Head php:

			// Include all needed css for zoom
			echo $axZmH->drawZoomStyle($zoom); 
			
			// Include all needed js for zoom
			echo $axZmH->drawZoomJs($zoom, $exclude = array()); 
		

Head Stylesheets and JS files:

			<!-- Include css for fancybox plugin --> 
			<link rel="stylesheet" href="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.css" media="screen" type="text/css">
	
			<!-- Include fancybox and jqDock plugins--> 
			<script type="text/javascript" src="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.js"></script>
			<script type="text/javascript" src="/axZm/plugins/demo/jquery.jqDock/jquery.jqDock.js"></script>
		

Head Javascript:

		<script type="text/javascript">
		function setFancyBox(){
			// Attach fancybox to all links with class='thumbDemoLink'
			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();} // important!
			});
		}
		jQuery(document).ready(function(){
			setFancyBox();
			// jqDock menu
			jQuery('#menu1').jqDock({
				align: 'right',
				size: 70,
				distance: 90
			});
		
		});
		</script>
		

Body PHP:

			echo "<div id='menu1'>";
			foreach ($pic_list_array as $k=>$v){
				// Apply a filter
				if (stristr($v,'bag') OR stristr($v,'belt')){
					echo "<a class='thumbDemoLink' href=\"/axZm/zoomLoad.php?zoomLoadAjax=1&zoomID=".$k."&zoomDir=".$_GET['zoomDir']."&example=".$_GET['example']."\">";
						echo "<img src='".$axZmH->composeFileName($zoom['config']['gallery'].$v,'180x180','_')."' alt='' title=''>";
					echo "</a>";
				}
			}
			echo "</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