previous exampleHomeDownload
next example

AJAX-ZOOM - 360/3D Spin & Zoom JavaScript player

Gallery with 360 objects will be loaded after the first spin is fully loaded, please wait...
Loading, please wait...
New version 4.0 of AJAX-ZOOM released! Among many other new features it finally supports clickable HOTSPOTS.
External controls example: zoomIn | zoomOut | reset | switch pan | switch spin | switch crop

Non technical

AJAX-ZOOM is a unique tool to present 360° product images on the web. Users can rotate the VR 360 object, also on Z-axis (3D multirow). Additionally deep zoom on every frame (the sprite contains a set of single images of the same object). The adoption of image tiles technology (image pyramid) allows the usage of high resolution images without compression. It has full support for touch devices and works great on iPad (without Flash plugin). Pinch zoom (with two fingers) is implemented too. In the full screen mode AJAX-ZOOM loads as many image tiles as needed not depending on screen resolution thus providing the best quality details quickly also with low bandwidth connectivity – perfect for mobile implementations. The player can be completely restyled. There are couple plugins for Magento & xt:Commerce (more to come). However it is easy to implement AJAX-ZOOM into any shopping cart e.g. open it in a lightbox – see example3.php.

Do not like the black toolbar?

If you do not like the toolbar below the player see this fully functional example (also on iPhone/iPad) without the toolbar: http://www.ajax-zoom.com/examples/example28.php; Of course You could also restyle it as you like - change colors, buttons design and switch off unneeded ones...

360 degree/3D product spins with 2D zoom in one player

If you would like to use regular 2D images together with 360 degree/3D product rotations, please use this example: http://www.ajax-zoom.com/examples/example29.php;

More implementations & examples of 360 spin tool

Some technical staff

A couple selected parameters which can visually be changed in this example (more parameters in the online documentation):

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.

By defining the query string parameter in ajaxZoom.parameter example=17 some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 17){. So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;

360° photography contributors

spinlab 360 product photography services 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

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...

Compatibility

6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

Comments (19)

Vadim Jacobi
2013-06-04 10:31:38
Vadim Jacobi
Sasha: please take a look here - http://www.ajax-zoom.com/index.php?cid=docs#phalanger
This particular example uses php to load the 360 gallery above, so you might want to use a different example where AJAX-ZOOM is implemented / loaded only over JavaScript, e.g. here: http://www.ajax-zoom.com/examples/example15_clean.php
Sasha
2013-06-01 00:35:36
Sasha
Hi There,
Really like your product, wonder if it's compatible with DNN ?
Mengxianfeng
2013-03-26 15:50:25
Mengxianfeng
Thanks for your share, but I have a question: whether I can use this demo on some mobile devices,such as Iphone(IOS),Android?
Kevin
2013-03-06 18:44:28
Kevin
There are 24 imgs used in the example with the glasses. Nice result if you ask me. Thanks for sharing!
korosh
2013-03-04 08:25:16
korosh
Can you put some code for creating full 3D product viewer? not just 3D rotate
Vadim Jacobi
2012-09-28 23:28:29
Vadim Jacobi
It depends on what you mean under smooth :-) To me a 360 spin should have at least 24 frames. 16 do not look very good. Personally I would choose 36, 48 or even 72 frames depending on the product (see the example with the flute above which has 72 frames).
Cebu Web Design
2012-09-28 00:49:57
Cebu Web Design
How many images do we need to create a smooth 3D rotation?
Vadim Jacobi
2012-09-13 22:02:05
Vadim Jacobi
To all of You who was asking about clickable / mouseover etc. hotspots: the next AJAX-ZOOM version 4.0 will definitely support hotspots! At 2D, 360 and 3D modes, at all zoom levels and at fullscreen mode. Basically it is already working on our prototype, we just need to write an API for handling it (the easy but intriguing part). Hopefully this will be the last new feature among many, many others in version 4.0 so we will be able to present it to You shortly.
Vadim Jacobi
2012-07-15 14:51:45
Vadim Jacobi
If you have 5-6 images it is probably not good to use 360 mode to show them. A simple gallery like this: http://www.ajax-zoom.com/examples/example16.php or any other on ajax-zoom.com is better. The economical objection is not really comprehensible to me. If you sell one or two more pieces of your products by offering 360 high resolution view - something, what is natural when you can physically examine it in a store, then all your efforts are surely paid off. One of our customers told me about their buying rate rising by 150% after implementing AJAX-ZOOM 360 view. So what is not economical about it?
test user
2012-07-14 08:26:53
test user
How would the rotation effect look if there are only say 5-6 images.

This is for an ecommerce clorhing store products.

It is very difficult to take say more than 5-8 angles for items like shirts, trousers etc.(it is not economical).
Vadim Jacobi
2012-06-22 01:55:09
Vadim Jacobi
Andrew : yes, you have to make images from different angles. 360 images would be overkill however. 24-36 or 72 are fully sufficient.
Andrew Barton
2012-06-21 21:18:38
Andrew Barton
How do you create the images? Do you need 360 different images or how does it rotate?
Salmec
2012-05-17 13:00:58
Salmec
How can i put some interactive maps over the images?
csjthomas
2012-04-20 16:42:31
csjthomas
very nice plug in
Vadim Jacobi
2012-01-24 19:07:24
Vadim Jacobi
Multiple players on one page are currently only possible inside iframe.
Damian
2011-12-22 16:04:15
Damian
Can you combine multiple elements?
Alex Reekie
2011-12-07 14:20:14
Alex Reekie
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
Vadim Jacobi
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
Evgeniy
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.
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