previous exampleHome
next example

AJAX-ZOOM usage with other plugins

- Fancybox - Colorbox

We thought it is a nice plug-in to combine AJAX-ZOOM with...

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>";
		
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