previous exampleHome
next example

AJAX-ZOOM - high resolution animations

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.

Loading, please wait...
A couple selected parameters which can visually be changed in this example (more parameters in the online documentation):

Head Javascript:

			<!-- jQuery core, needed! -->
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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>
	
		
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