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...
Some external controls over API: zoomIn | zoomOut | reset | switch pan | switch spin | switch crop
Crop editor AJAX-ZOOM 360 taking a step further with Ver. 4.1.9! Fully configurable cropped thumbs gallery with "spinTo" and "zoomTo" - a must to see!
Clean example Horizontal slider Resopnsive
Hotspot configurator Also check out the clickable and fully configurable HOTSPOTS configurator with tons of interesting features!
Clean example Resopnsive Resopnsive
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe
- free download with sample images and all the examples!

General information - non technical

AJAX-ZOOM is a unique "Flash" free tool to present 360° product images on the web. Users can rotate 360° object (the sprite contains a set of single images), also on Z-axis (3D multirow) and additionally deep zoom on every frame. The adoption of image tiles technology (image pyramid) allows to utilize high resolution images without compression rates which would destroy the image quality.

AJAX-ZOOM has full support for touch devices, e.g. pinch zoom with two fingers and works great on iPad. In the full screen or responsive modes AJAX-ZOOM loads as many image tiles as needed to fit users sreen resolution and thus provides best details quality quickly also with low bandwidth connectivity, which is perfect for mobile implementations. AJAX-ZOOM player can be completely restyled (skinned) to fit any design / corporate identity.

There are couple plugins for Magento & xt:Commerce (more to come). However it is easy to implement AJAX-ZOOM into any shopping cart / CMS 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 without this toolbar:
http://www.ajax-zoom.com/examples/example28.php

Of course you can also completely reskinn and disable certain buttons, remove this toolbar completely, enable a different tollbar which looks more modern and has more options to configure. And you can also reproduce the navi behaviour with buttons placed whereever in your layout using AJAX-ZOOM API. Please note that this black toolbar might not be seen if you are on iPad or some other mobile devices, because the default settings of touchSettings option might be set to disable this navi for touch devices...

Derived examples of example15.php

For a clean example without "360°/3D gallery" and anything else please see here:
http://www.ajax-zoom.com/examples/example15_clean.php
(no PHP code required at the frontend!)
To start AJAX-ZOOM 360°/3D in responsive / adaptive layout, see
http://www.ajax-zoom.com/examples/example15_responsive.php
To start AJAX-ZOOM 360°/3D in fullscreen mode, see
http://www.ajax-zoom.com/examples/example15_fullscreen.php
For a clean example with "360°/3D gallery" and anything else please see here:
http://www.ajax-zoom.com/examples/example15_gallery_clean.php
No PHP code required at the frontend. The PHP code inside the file can be extracted into a different file and called over AJAX, please see comments at the biginning of this PHP file.

Some other implementations & examples of 360 spin tool

To use 360°/3D product spins with 2D zoom and video in one player, see
http://www.ajax-zoom.com/examples/example29.php
To implement AJAX-ZOOM 360/3D in responsive / adaptive layout with or without gallery, see
http://www.ajax-zoom.com/examples/example24.php
To load AJAX-ZOOM 360/3D in a lightbox e.g. Fancybox, see
http://www.ajax-zoom.com/examples/example3.php
To load AJAX-ZOOM 360/3D in a responsive / adaptive lightbox, see http://www.ajax-zoom.com/examples/example27.php
Here you will find a 3D - multirow spin, rotate & zoom example:
http://www.ajax-zoom.com/examples/example15_vr.php
It is not included in the download package, but the only difference between regular 360 spin and multirow is that original images are placed in subfolders of the target folder (the one you will be pointing AJAX-ZOOM at). You do not need to define these subfolders anywhere separately. AJAX-ZOOM will instantly detect and procede all the images in them.

Here is a truly VR spherical example with 9 rows and 90 images per row = 810 images http://www.ajax-zoom.com/examples/example15_vr9.php

For developers - some technical stuff

Following is some very basic technical information about AJAX-ZOOM. If your are serious about trying and implementing AJAX-ZOOM on your webpage, then viewing other examples and browsing in documentation are highly recommended as first step! After you have found an example which does conceptually suits your needs, your should download the package and make it work on your server or localhost.

While searching for a suitable example do not pay attention to design, galleries and other things, which are all configurable, disableable and finally adjustable, like galleries, navigation bars and so on. The point is, that AJAX-ZOOM is so flexible, that our team sometimes does not regognize it's own product after it has been implemented and adjusted by our customers. If you are not sure what example is the right one to start with, you can send us a mockup which would visualize your intent and we will gladly give you a hint.

To load the 360 spinner all you need is to pass the directory (3dDir) where images (frames of 360) are located. The number of frames depends on the number of images and will be determined instantly! For a single row (360, not sptherical 3D) you should have at least 12 images. The more images are available, the smoother is your animation. However, the more images are loaded, the longer it takes for the preload. Therefore we consider 72 images as perfertly smooth for the web; 36 images is a good middle and does it as well.

All image processing including the generation of image tiles is done on-the-fly during the first load of AJAX-ZOOM with your 360/3D in the browser.

There are several 360/3D specific options to adjust the spin behaviour and appearance. However all other options from plain 2D zoom are applicable to 360 degree player as well! A small selection of selected parameters has been made to be visually changed in this example (more parameters in the online documentation): Reverse spin direction. Enable | disable the blur effect. Disable | enable the navigation toolbar. Disable | enable the zoom slider and disable | enable the spin slider.

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; Here you will find more information on how to setup options best.

To interested developers AJAX-ZOOM offers a variety of methods and callbacks to develop a highly customized applications. Alternatively we can create your individual application as a custom work.

Example code for integration:

			<!--  Init AJAX-ZOOM player and make some checks -->
			<script type="text/javascript">
		
			// Create empty jQuery object which is interpreted in axZm/jquery.axZm.loader.js
			var ajaxZoom = {}; 
			
			// Define callbacks, for complete list check the docs
			// http://www.ajax-zoom.com/index.php?cid=docs#API_CALLBACKS
			ajaxZoom.opt = {
				onBeforeStart: function(){
					// Some of the options can be set directly as js var in this callback
					// jQuery.axZm.spinReverse = true;
					// jQuery.axZm.spinReverseZ = true;
					
					// Optionally perform some DOM manipulations
					jQuery('.zoomContainer').css({backgroundColor: '#FFFFFF'});
				}
			};
			
			// Define the path to the axZm folder, adjust the path if needed!
			ajaxZoom.path = "../axZm/"; 
			
			// Define your custom parameter query string
			// example=17 has many presets for 360 images*
			// 3dDir - best of all absolute path to the folder with 360/3D images
			
			
			// *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; 
			ajaxZoom.parameter = "example=17&3dDir=/pic/zoom3d/Uvex_Occhiali"; 
			
			// The ID of the element (placeholder) where AJAX-ZOOM has to be inserted into
			ajaxZoom.divID = "AZplayerParentContainer";
			
			/*
			
			// Instead of using the loader file jquery.axZm.loader.js (see below)
			// you can use http://www.ajax-zoom.com/index.php?cid=docs#api_load
			// Following files need to be loaded before jQuery.fn.axZm.load is triggered:
			// 1. jQuery core (e.g. http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js), 
			// 2. /axZm/jquery.axZm.js (AJAX-ZOOM core file) 
			// 3. /axZm/axZm.css (AJAX-ZOOM css)
			// Do not use jQuery.fn.axZm.load and /axZm/jquery.axZm.loader.js together!
		
			jQuery(document).ready(function(){
				jQuery.fn.axZm.load({
					opt: ajaxZoom.opt,
					path: ajaxZoom.path,
					parameter: ajaxZoom.parameter,
					divID: ajaxZoom.divID
				});			
			});
		
			*/
			</script>
			
			<!-- Include the loader file, adjust the path if needed! -->
			<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...
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

Comments (19)

Vadim Jacobi
2014-08-20 19:13:00
Vadim Jacobi
Lola: there is no plugin for VirtueMart but you might want to check this example: http://www.ajax-zoom.com/examples/example15_clean.php
Lola
2014-08-18 19:16:43
Lola
Hello,


Is this compatible with VirtueMart?

Thank you.
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
javascript picture zoom
javascript picture zoom