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 are 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 shot with a "Hasselblad" camera, but nowadays, there are several affordable DSLRs from "Canon" or "Nikon", which can achieve the same resolution range.
Despite the high resolution, the 360° product view is loaded very quickly. That 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 the ultra-high resolution to take advantage of multi-resolution technology in general. Even with 8, 10, or 20-megapixel images, the difference quickly becomes apparent. 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 the "simpleMode" option here.
To tell the AJAX-ZOOM's 360 viewers 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 those tiles and other scaled images with the batch tool before making a 360 available to the front end.
There are several methods to integrate the AJAX-ZOOM 360-viewer into an 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 of this.
Possible UI controls are the zoom slider, spin slider, and image map. By default, an image map appears in the corner when the view is zoomed in. All those UI 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 UI controls and buttons are skinnable, and there are several predefined skins already included.
The settings of the 360 behavior, such as the direction of rotation or sensitivity, can be conveniently set via
options located in the configuration file.
Alternatively, you can adjust them in the AJAX-ZOOM
onLoad callback by setting or changing the value of the
jQuery.axZm['name_of_option'] object's 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 the new APP container, a Fancybox and the Colorbox jQuery extension to illustrate the procedure.
Load AJAX-ZOOM viewer 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 the 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 a single row and 3D photography rotations with several rows.
Responsive 360-degree AJAX-ZOOM viewer example without bootstrap or any other CSS libraries for HTML containers.
This example also shows how to load a different 360-degree product view into the 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 a few selected thumbnails. When the user clicks on a thumbnail, the animation spins to this particular frame.
This particular 360 view is especially interesting because the 360 photographer uses a filmmaking technique for a flying camera effect rather than a regular 360-degree photography.
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.
In this example, AJAX-ZOOM loads into responsive Fancybox by a click.
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.
This is a tutorial describing the basics of AJAX-ZOOM handling. It is a very simple but useful demonstration of how to open the AJAX-ZOOM 360/3D viewer or gallery with flat images at full-screen mode using on click event attached to any HTML element.
Clean (without too much redundant code) example with a 360-degree product spin and intentionally 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.
The AJAX-ZOOM 360 viewer is capable of switching between 360 product views using its API methods.
One of the methods is
With this, a 360 view changes and keeps the frame number if required, but it does not keep the zoom state.
$.fn.axZm.loadAjax360Type method, however, you can switch between 360 product spins without losing the zoom state.
This method is 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.
Using the modules/plugins is optional! It is not required to use them. You can use AJAX-ZOOM as a stand-alone application or integrate it manually into nearly all systems.
However, if a module for your CMS or e-commerce/shopping cart system is available, it tremendously facilitates and speeds up the integration. Provided that your server meets technical requirements, you can have AJAX-ZOOM up and running within a few 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, and 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 the AJAX-ZOOM image viewer on a domain. Unlimited options are available. The costs for the regular licenses are one-time payments! 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 need to have Skype installed on your device. In case live support over Skype is not available immediately, please leave us a message or send an email by using the contact form.
We answer every inquiry or question that relates to the AJAX-ZOOM software!