example18.phpHOMEExamples overviewDownloadAsk a question
example20.php

AJAX-ZOOM - high resolution animations

In this 360° animation the internal horizontal gallery is turned on. Normally it would show all the available frames/images of the animation. But as you can see not all of the frames are displayed. They are filtered by "zoomCueFrames" parameter which is passed to AJAX-ZOOM along with other data (see Javascript code below at line 24).

Loading, please wait...

Alternatives

In example35.php you can create a similar gallery but with much more options like zoom level, instant generation of the thumbnails and add descriptions for each crop.

JavaScript & CSS files in Head


<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!--  Include AJAX-ZOOM javascript && css, adjust the path if needed. Best set absolute path -->
<link rel="stylesheet" href="../axZm/axZm.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
	

HTML markup


		<div id="azParentContainer" style="width: 600px; min-height: 400px;">
			Loading, please wait...
		</div>
	

Javascript


// Create a var to hold the settings
var ajaxZoom = {}; 

// AJAX-ZOOM callbacks
ajaxZoom.opt = {
	// e.g. onBeforeStart
	onBeforeStart: function(){
		// do something
		jQuery.axZm.gallerySlideNavi = false;
	}
};

// Path to /axZm/ folder, best set absolute path
ajaxZoom.path = "../axZm/"; 

// 3dDir - path to the folder with 360 images
ajaxZoom.parameter = "3dDir=/pic/zoomAnm/Watch";

// example - options set in /axZm/zoomConfigCustom.inc.php after 
// elseif ($_GET['example'] == 21){
ajaxZoom.parameter += "&example=21";

// zoomCueFrames - CSV of frames which should be shown in the gallery
ajaxZoom.parameter += "&zoomCueFrames=1,4,8,15,28,39"; 

// The ID of the element where ajax-zoom has to be inserted into
ajaxZoom.divID = "azParentContainer";

// Tigger AJAX-ZOOM
jQuery(document).ready(function(){
	jQuery.fn.axZm.load({
		opt: ajaxZoom.opt,
		path: ajaxZoom.path,
		parameter: ajaxZoom.parameter,
		divID: ajaxZoom.divID
	});			
});
	

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.