previous exampleHomeDownload
next example

jquery AJAX-ZOOM usage with any other jQuery plugin

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

Modules & Plugins Ecommerce

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment.
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