This animation example derivates from the lately introduced 360 degree functionality. The mouse / touch spin feature is turned off. Users navigate over the UI slider and by clicking on some selected key frames from the animation, which are loaded into horizontal gallery. Choosing the vertical gallery instead is also possible and is a matter of changing an option in the config file. One of the new features is the play / pause button for the animation. It could also be turned on for standard 360 spin. All you need to load the animation is to pass the directory path (3dDir) with high resolution images to AJAX-ZOOM as a query string parameter (see below). Image processing including the generation of image tiles is done on-the-fly during the first load in the browser.

Head Javascript:

			<!-- jQuery core, needed! -->
			<script type="text/javascript" src="../axZm/plugins/jquery-1.6.2.min.js"></script>
		

Body Javascript:

				<script type="text/javascript">
				
				// Create new object
				var ajaxZoom = {}; 
				
				ajaxZoom.opt = {
					// Change some CSS, not needed
					onBeforeStart: function(){
						jQuery('.zoomContainer').css({backgroundColor: '#000000'});
						jQuery('.zoomLogHolder').css({width: 70});			
					}
				};
				
				// Define the path to the axZm folder
				ajaxZoom.path = "../axZm/"; 
				
				// Define your custom parameter query string
				// zoomCueFrames are the filter for key frames showing in the gallery
				// example=21 -> overwrites some default parameter in zoomConfigCustom.inc.php after elseif ($_GET['example'] == 21)
				ajaxZoom.parameter = "zoomCueFrames=1,3,5,8,10,12&example=21&3dDir=/pic/zoom3d/Uvex_Occhiali"; 
				
				// The ID of the element where ajax-zoom has to be inserted into
				ajaxZoom.divID = "test";
				</script>
				
				<!-- Include the loader file -->
				<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
	
		

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

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