For initial view zoom is disabled (can be changed of course)
Switching between the 360's is performed with API $.fn.axZm.loadAjax360Type which allows to load a different 360 without zooming out
Click on 360 opens the animation in a popup which is sized according to parent or some other container.
This overlay is created dynamically and AJAX-ZOOM is appended to this created div with API $.fn.axZm.fullScreenRelChange
which basically changes parent container for AJAX-ZOOM.
While it is opened in this overlay, some AJAX-ZOOM settings are changed dynamically, e.g.
zoom is activated again.
Also certain html elemets are appended to the layer with ID #axZm_zoomLayer: to the left we have title and description; to the right "spinTo && zoomTo" elements.
Title / Description, as well as "spinTo && zoomTo" data is defined in JSON type of object. This object can be easily "written" with any type of server side code or
even retrieved with AJAX.
The "spinTo && zoomTo" data can be grabbed in many different ways. A designer could get this data in Adobe Photoshop like it is described below.
We could also create a small online widget based on example35.php or adapt
it for generating JSON of any structure. If you want certain areas of the image the x1,y1,x2 and y2 coordinates can be defined as
percentage values, e.g. second part of the image devided into 5 "stripes" vertically would be [0, '20%', '100%', '40%'] which is easily calculated.
Get x1, y1 positions for spinTo and zoomTo with Photoshop CS6
Get x2, y2 positions for spinTo and zoomTo with Photoshop CS6