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.
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...
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;
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;
| 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. |
<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>
|
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 |
| 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 |
| 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. | |
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
Really like your product, wonder if it's compatible with DNN ?
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).
Exactly what I was looking for and I love all the customisation options.
Can it, then start the rotation by clicking the mouse on the image
As videoplayer ?