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).
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.
<!-- 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>
<div id="azParentContainer" style="width: 600px; min-height: 400px;"> Loading, please wait... </div>
// 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
});
});