One of the outstanding features of the AJAX-ZOOM media viewer is the 360° rotary view of the products / objects. Each control element (there are plenty of them) can be switched off, expanded and adapted. In addition, the behavior and feel of the player is adjustable to the most refined detail.
Above is an example of the standalone 360° product viewer with 36 images. The native resolution of each image is 7216 x 5412px. These are about 39 Megapixels! The images of the bike were shoot with "Hasselblad" but nowadays there are several affordable DSLR from "Canon" or "Nikon", which can achieve this resolution range.
Despite the high resolution, the 360° product view is loaded very quickly. This is due to the multiscale resolution technology where only parts of the image are loaded, which are needed for the zoom level and viewport.
However, you do not necessarily need to use ultra-high resolution to take advantage of multi-resolution technology in general. Even with 8, 10 or 20 megapixel images, the difference quickly becomes clear. If you do not want to use the multi-resolution technology, you can disable it by enabling the AJAX-ZOOM "simple mode" option. Please find more reading and visual testing on "simpleMode" option here.
To tell the AJAX-ZOOM 360 viewer, which images it has to load for a 360 product view, you just need to define the path to the folder, where your 360 degree images are located. The software does everything else automatically. In case that the image tiles are not available yet, the multi-scaling process is initiated on-the-fly. Of course, you can generate these tiles and other scaled images with the batch tool before made a 360 available to the front end.
There are several methods to integrate the AJAX-ZOOM 360 Viewer into existing application. You can embed the 360 player directly into a responsive container or initiate it in a modal box from a link. It is also possible to start the player in full screen mode or full browser window. With responsive embedding, the player instantly adapts to the size of the outer HTML element, so you do not have to take care about this.
Possible UI controls are zoom slider, spin slider and the image map. By default, image map appears in the corner when the view is zoomed in. All these elements are optional. Additionally, there are various buttons, for example buttons to toggle between rotating and panning modes, to change into full-screen view, to zoom-in and out, toggle play / pause (rotation) or toggle hotspots visibility. All the UI controls and buttons are skinnable and there are several predefined skins already included.
The settings of the 360 behavior, such as direction of rotation or sensitivity, can be conveniently set via
located in the configuration file. Alternatively you can adjust them in the AJAX ZOOM
by setting or changing
jQuery.axZm['name_of_option'] object property.
Open AJAX-ZOOM player in a lightbox / modal window from a link (click event) as AJAX invoked content.
The content can be a 360-degree product spin, 3D product view, a gallery or one flat image. The example uses Fancybox and Colorbox to illustrate the procedure.
Load AJAX-ZOOM inside an iframe. This is the simplest way to put in place AJAX-ZOOM anywhere.
You can place as many instances on one page as you like. Full screen views work on desktop and mobile devices as well. Using "lazyload" to postpone loading of the content inside iframe is possible and the example demonstrates how to implement it.
The content of the viewer inside iframe can be an image gallery, a 3D / 360 product rotation or one high-resolution image with progressive zoom. Since AJAX-ZOOM viewer is responsive, it will adjust to the size of responsive iframe automatically.
Clean (without too much redundant code) implementation of the AJAX-ZOOM 360 spin & zoom viewer with a single 360 product view. You can use it for 360 product views with single row and 3D photography rotations with several rows.
Responsive 360-degree AJAX-ZOOM viewer example without bootstrap or any other CSS library containers.
This example also shows how to load a different 360-degree product view into same instance of the viewer using
$.fn.axZm.loadAjaxSet API method.
Additionally, API methods
$.fn.axZm.zoomReset for resetting the viewport and
$.fn.axZm.fillArea for covering the stage of the viewer are presented.
Open 360-product rotate player as full browser window on load without user interaction. The parent container is set to window / body HTML element.
This is a 360 example of an animation where, unlike the other 360 views, the horizontal gallery is not disabled. Normally, the gallery would show thumbnails of all 360 frames, which in most cases does not make any sense. But, with a filter setting in this 360 view, the gallery contains only few selected thumbnails. When the user clicks on a thumbnail, the animation spins to this particular frame.
Also in this example, we use the
$.axZmEmbedResponsive plugin to define the aspect ratio for the parent container of the viewer.
The plugin prevents that the viewer is taller than the inner height of the browser window.
It reduces the height of the parent container if it does not fit into the viewport and keeps the aspect ratio if it does.
This particular 360 view is especially interesting because the 360 photographer uses rather a film making technique for a flying camera effect, than a regular 360-degree photography.
For invoking AJAX-ZOOM with Fancybox in such a way, we have created a wrapper extension.
$.openAjaxZoomInFancyBox plugin triggers and manages the AJAX-ZOOM viewer inside the Fancybox.
It also makes the first generation Fancybox responsive.
This example can also serve as a tutorial about defining the content that you want to load into AJAX-ZOOM viewer! It lists by example all possible query string parameters (zoomData, zoomDir, 3dDir, zoomFile and zoomID). These are the parameters AJAX-ZOOM supports out of the box to define flat images and paths for the 360 viewer. The example also explains how you can compress the parameter values. Compressing helps to hide direct image paths from exposing them to the public and shorten the length of the query string.
Clean (without too much redundant code) example with a 360-degree product spin and excessive usage of hotspots.
There is no big difference between any other 360-degree spin implementation except that it adds hotspots via
method in AJAX-ZOOM
The second difference is that this example has additional UI elements.
These hotspots have been produced with the hotspot editor.
AJAX-ZOOM 360 viewer is capable of switching between 360 product views using its API methods.
One of the methods is
With it, the 360 views will change and keep the frame number if you wish, but it will not keep the zoom state.
$.fn.axZm.loadAjax360Type method, however, you can switch between 360 product spins without losing the zoom state.
Perfect for 360 product configurators.
In this example, it is possible to compare these two methods within responsive integration and at a full-screen view.
It is not required to use the AJAX-ZOOM "Modules / plugins / extensions", as AJAX-ZOOM can be used as stand-alone application or integrated manually nearly in any system. However, if a module is available for your system, it will facilitate and speed up the integration of AJAX-ZOOM into your CMS or e-commerce / shopping cart tremendously. If your server meets all technical requirements, then you will have AJAX-ZOOM running in your system within two minutes. You can install and configure these AJAX-ZOOM modules with just a few clicks and without writing a single line of code.
Available are modules for Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware und Oxid (the last two are commonly used in German speaking countries).
The license price primarily depends on the number of different images that display in AJAX-ZOOM image viewer on a domain. Unlimited options are available. The prices for the regular licenses are one-time payment! You can find the complete license agreement and price list on the download page. Before ordering, we advise you to download and test the demo (light) version within your development environment.
If necessary, we can issue time-limited license keys free of charge. However, AJAX-ZOOM and AJAX-ZOOM modules / plugins for diverse CMS and shopping carts should work with few restrictions without entering any licensing data! If something does not work as expected, there must be a different reason than missing license. Do not hesitate to contact AJAX-ZOOM support if you encounter any technical difficulties.
To use live-support-chat you will need to have Skype installed on your device.
In case live support over Skype is not immediately available please leave a message or send us an email over contact form at first.
Every AJAX-ZOOM related inquiry / question will be answered!