Release date: November 2nd, 2018
Current version: 5.3.9
Change log

AJAX-ZOOM demo

AJAX-ZOOM examples containing 360 viewer wihtout mixed content and without additional features

example3

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.

example13

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.

example15_clean

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.

Almost lacking any unnecessary code and text, this example is perfect to start implementing the viewer in your project. The JavaScript source code has comments. Looking at it you will quickly understand which parameter values are variable and what they stand for. For instance, the value of 3dDir parameter stands for the path to the folder with 360° images.

example15_responsive

Responsive 360-degree AJAX-ZOOM viewer example without bootstrap or any other CSS library containers.

It shows how to resize the parent container via JavaScript so that the viewer adjusts its size too. When the window size changes, the size of the viewer adjusts automatically, so you do not have to take any actions in that case.

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.

example15_fullscreen

Open 360-product rotate player as full browser window on load without user interaction. The parent container is set to window / body HTML element.

Open AJAX-ZOOM at full screen without the user having clicked on an element is not possible. This is a restriction imposed by the browsers and it does make sense. The JavaScript event, which is required for opening an element at fullscreen, are click or mouse / pointer up events. Therefore, mouseover will not work for this purpose too.

example19

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.

example27

In this example, AJAX-ZOOM loads into responsive Fancybox. This is a slightly modified, first generation Fancybox script (MIT). Instead of loading source images, the script loads AJAX-ZOOM viewer with deep zoom and optional thumbnails gallery. It can also load AJAX-ZOOM 360 viewer. The modifications to the first generation Fancybox core JavaScript however, do not affect the default functionality! Thus, you can use it for both purposes.

For invoking AJAX-ZOOM with Fancybox in such a way, we have created a wrapper extension. This separate $.openAjaxZoomInFancyBox plugin triggers and manages the AJAX-ZOOM viewer inside the Fancybox. It also makes the first generation Fancybox responsive. $.openAjaxZoomInFancyBox works even with Fancybox 2 core JavaScript without any changes in the core of Fancybox 2 JavaScript file.

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.

example30

A very simple demonstration of how to open AJAX-ZOOM 360/3D viewer or gallery with flat images at full screen mode using onclick event attached to any HTML element.. You will need only a few JavaScript files to include into your template to get started with this example. This is a tutorial describing the basics of AJAX-ZOOM handling.

example33_clean

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 $.fn.axZm.loadHotspotsFromJsFile method in AJAX-ZOOM onLoad event. The second difference is that this example has additional UI elements. It adds a play pause and hotspots visibility toggle buttons directly via JavaScript.

These hotspots have been produced with the hotspot editor.

example36

AJAX-ZOOM 360 viewer is capable of switching between 360 product views using its API methods.

One of the methods is $.fn.axZm.loadAjaxSet. With it, the 360 views will change and keep the frame number if you wish, but it will not keep the zoom state. With the $.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.

Modules / plugins

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.

Magento PrestaShop WooCommerce WordPress shortcode Opencart Oxid Shopware

Available are modules for Magento, Prestashop, WooCommerce (WordPress), Opencart, Shopware und Oxid (the last two are commonly used in German speaking countries).

Compatibility

License

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!

Live-Support-Chat