From Ver. 3.0.1 it is possible to display a series of images as VR Objects 360° with 3D Spin & Zoom. The sprite contains a set of single images of the same object.

There are several options to adjust the spin behaviour, for example the blur effect during spin. The spin direction while dragging can be reversed. Of course all other options from plain zoom are applicable to 360 degree spinner. If you do not like the navigation bar, you can disable it. Zooming is still possible with the mousewheel, with external controls for zoomIn, zoomOut (see API) or with the zoom slider, added in Ver. 3.0.2. Also in this update an additional slider control for spinning has been added.

To load the spinner all you need is to pass the directory (3dDir) where images are located. The number of frames depends on the number of images and will be determined instantly. All image processing including the generation of image tiles is done on-the-fly during the first load of the VR Object in the browser.

Also see this slightly modified example where the frame number ratains when spin object changes. Usefull for simmilar objects or same objects with different colors.

360° photography contributors

SpinLab makes 360 degree product photography for manufacturing companies. They also build 360 degree product photography studios for companies looking to bring 360 degree product photography in house. With the mobile unit they can come to customers organization and perform the 360 degree product session.

Use custom loader:

			<script type="text/javascript">
			// Create new object
			var ajaxZoom = {}; 
			
			ajaxZoom.opt = {
				onBeforeStart: function(){
					jQuery('.zoomContainer').css({backgroundColor: '#FFFFFF'});
					jQuery('.zoomLogHolder').css({width: 70});			
				}
			};
			
			// Define the path to the axZm folder
			ajaxZoom.path = "../axZm/"; 
			
			// Define your custom parameter query string
			// By example=17 some settings are overridden in zoomConfigCustom.inc.php
			// 3dDir=/pic/zoom3d/Uvex_Occhiali is the absolute path to the directory with images
			ajaxZoom.parameter = "example=17&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 (5)

Vadim Jacobi

2012-01-24 19:07:24

Multiple players on one page are currently only possible inside iframe.

Damian

2011-12-22 16:04:15

Can you combine multiple elements?

Alex Reekie

2011-12-07 14:20:14

Thanks for this - really great piece of work!
Exactly what I was looking for and I love all the customisation options.

Vadim Jacobi

2011-11-14 06:47:54

Evgeniy: take a look at this option - http://www.ajax-zoom.com/index.php?cid=docs#spinOnClick You could also enable the play/pause button like shown in this example - http://www.ajax-zoom.com/examples/example19.php or use API functions for this purpose.

Evgeniy

2011-10-28 08:22:31

Can I stop the rotation (spin) when clicking the mouse on the image
Can it, then start the rotation by clicking the mouse on the image
As videoplayer ?

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