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

AJAX-ZOOM demo

AJAX-ZOOM examples, which are directly related to Hotspots

example12

Demonstration of the AJAX-ZOOM hotspot API. This example is for developers only!

You can tag images with interactive markers (hotspots) using $.fn.axZm.createNewHotspot API by clicking on a spot at AJAX-ZOOM viewer. Additionally, you can define title and descriptions for these markers. All data such as coordinates of the hotspots and the text is present in external JavaScript object, which keeps track on all changes.

In this example, the data object prints in the "virtual console" as JSON and updates when it changes. You can store this data within your application or do something different with it, e.g. send it via PostMessage to another client.

All codes have inline comments and as a developer, you will be able to start adapting them fast. In the documentation, you will find additional information about all API methods you will find in this example code.

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.

example33

The hotspot editor lets you put clickable or otherwise interactive markings on flat images and 360 / 3D views. Image files are not changed and you can always create new or delete old hotspots. By default, the editor saves the hotspots data into a JavaScript file. You can then load this hotspots data file into any AJAX-ZOOM example. Also in our extensions you will mostly find an option, which allows you to define the path to the hotspots file. Depending on the extension, you can also just place the code from the hotspot file or directly from editor into that option. Anyway, loading hotspots produced with this editor is not problematic.

As an alternative to saving hotspots data into a JavaScript file, you can set the editor to retrieve and save hotspots data virtually anywhere, e.g. a database. This is how we do it in our modules too, where this editor is part of the backend. For more on this please see here.

For now, the editor features two types of hotspots. A normal spot and a rectangular area. Rectangular areas increase in size simultaneously on zoom. In a future version, it will be possible to define polygons for hotspot areas too. Positioning hotspots is as simple as drag and drop them.

The editor features several interactions such as modal boxes with additional content. There are also several label types and connecting lines available. Besides built in features it is possible to define your own JavaScript functions for on click or mouse over events.

This hotspot editor is solely built upon public AJAX-ZOOM API methods. Thus, for displaying hotspots on 360 spins or regular images you do not necessarily need this editor. You can dynamically create and remove hotspots from data coming from elsewhere. There is a documentation for all API methods and property types of the AJAX-ZOOM hotspot data object. Obviously, this is something for developers. Normal users should use this editor or let their technical stuff integrate it into the workflow.

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.

example33_fullscreen

Full-page 360-degree product spin view with hotspots. In this example, the viewer opens on load and covers the entire browser window. The user can further expand it to fullscreen view.

If you want to integrate this 360 viewer with hotspots but have limited access to the frontend, you can integrate it using a responsive iframe element. The viewer will adjust to the size of the iframe automatically.

example33_responsive
360 degree product spin with hotspots loaded into parent container with responsive width and height.
example34

This demo directly relates to AJAX-ZOOM hotspots. Our task was to create an example with the possibility to highlight parts of an image from data located in external sources. In this particular implementation, the data is an OCR schema and it is stored in XML files. Some OCR software includes coordinates (x1, y1, x2, and y2) of recognized words into their schemata. These coordinates are enough information for AJAX-ZOOM hotspot API to create and remove overlays at any viewport and zoom level.

Furthermore, users are able to search for words in the autosuggest field. The results display below the field and sorted by the page and finding numbers. This UI is actually a proof of concepts and it works. All pages with no results hide temporarily. When the user clicks on a number, the viewer takes him to the page and zooms to the selected spot. The word highlights with an overlay.

The OCR schemes supported out of the box are "hOCR" and "ALTO". It is easily possible to adapt it to any other scheme. Even better would be to expose the XML files in a database and search there. That would make it easier to search in very large archives. Switching between images sets (books, newspapers etc.) is not a big deal for AJAX-ZOOM API methods. But, since this intends to be a frontend interface blueprint, the example stops at that point. Without further adaptation, it is efficiently usable for scanned writings with a length of up to 100 - 200 pages. A perfect software tool for museums, digital archives, and other digital publishers.

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