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

AJAX-ZOOM demo

AJAX-ZOOM examples with multimedia content

example24

An example of product 360 views together with flat images and videos within responsive full-page layout. The media viewer covers the most space of the viewport.

In this particular example, the thumbnails gallery does not use any sliders. However, since this media viewer is loading over $.axZm360Gallery plugin / extension for AJAX-ZOOM, there are several options to display the gallery in a different way.

One of the options is an array through which you pass all types of media sources to the plugin. The order of the items is preserved. Two other options define the selectors of the containers into which the gallery and the viewer have to load. These three configuration settings are sufficient to display your media in one viewer instance.

There are several other AJAX-ZOOM examples using this plugin. For documentation and full options list, please see example29.

example29

AJAX-ZOOM extension to display 360 product views or 3D product views together with flat images in one viewer. Optionally add Videos from Youtube, Vimeo, and Dailymotion. You can also add other content to display within iframe or invoked by AJAX request.

The gallery shows a thumbnail for each item. It retrieves cover images for videos and 360 images automatically.

The HTML markup and CSS for the viewer is not too abundant. To define content that you want to show in the gallery you only need to fill one data option. It is an array where you can set the type and the source of each item. The gallery preserves the order of items in array.

The entire code of the extension is open for editing by developers.

example29_clean

Clean (without too much redundant code) example of media gallery with 3D / 360 degree product spins, flat images, videos and other content.

example29_fullscreen

In this example, the media gallery covers the entire browser window and can further expand to fullscreen view. If you want to integrate this gallery but have limited access to the frontend template, you may want to implement this example using a responsive iframe element. The gallery will adjust to the size of the iframe automatically.

example29_responsive

Responsive AJAX-ZOOM multimedia gallery example with additional illustration of how to change the size of the player using JavaScript.

This is useful when you want to place the gallery inside a container that changes its size by JavaScript as well. In this case, you will need to tell the viewer that it must adjust to the size of its container. You do not have to tell it if the size of the container changes because the size of the browser window has changed. This happens automatically and AJAX-ZOOM adapts instantly.

example29_responsive_easy

In this example, AJAX-ZOOM media gallery settings are set in the way that for 360 views the user has only the possibility to spin a product at none-zoomed state. On mouse click or double tap, the media viewer zooms to the maximal zoom level, which is 100% of the original image resolution. At this zoom state, the second click or double tap on touch devices makes the viewer zoom out. The entire image is visible again.

There is nothing special about these features except the loading time of the zoomed view. Because of AJAX-ZOOM using the image tiles technology it does not need to load the entire high-resolution image when the user wants to see a portion of it. What it does is streaming only the small part of the viewport, which is visible to the user. You can however, disable this tiles option and enable the AJAX-ZOOM "simple mode" feature, which will load the entire source image as most of similar software solutions do.

What is also different to this example in contrast to other example29 is that the items gallery shows at full screen mode as well.

example32

This is one of the most progressive zoom on hover extensions with optional 360 product views, multilevel 3D product views, videos, 360 product tours and hotspots. It is adaptive, responsive and it features over 100 options. Depending on the settings, the extension displays as a swipe slider on mobile devices and as zoom on hover on desktops.

The images in zoom window, as well as the swiping images are not the original high-resolution source images. The high-resolution images display when the user clicks on that preview. At full screen or responsive modal box, the original image shows inside AJAX-ZOOM viewer. In there, it is further on possible to swipe between the images and switch between other media types.

The media gallery is optional and you can place it vertically or horizontally. By default settings, the extension determines the best position out of two on its own.

We integrate this extension into all our modules for shopping carts. It replaces the default image viewer at product detail pages. Depending on the state of the module development progress, you can also set it to display e.g. in a tab and only for 360 product views.

In example32, you can learn more about subtle differences, which make a big difference when put together. You will also be able to switch few interesting options and immediately view the changes. At the bottom of this page, you will find full documentation and some example codes.

example32_axZmMode

Enabling "axZmMode" option of the hover zoom extension makes it act as most other AJAX-ZOOM examples. The deep zoom viewer with tiles technology shows up without any detours. Users can zoom in and out by the mouse wheel or pinch zoom on touch devices.

We have added this option to the hover zoom extension primarily because the extension and all its options are already part of several e-commerce modules. It just did not make any sense to implement a different example and provide backend options configuration handling for it.

However, some of the options of the hover zoom extension such as the items gallery or aspect ratio observation are still functional and useful. This fully justifies a little overhead compared to if you would only want to use pure AJAX-ZOOM implementation.

example32_ecom

AJAX-ZOOM mouseover extension integrated into fictive products detail page with color swatch feature. The color swatch is the working part of this product detal page mockup. You can change few important configuration settings and watch the changes happen immediately.

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