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.Proceed to more information about 360° product views or read more on this page...
AJAX-ZOOM supports hotspots (interactive markings on the image) not only on 360° degree product views, as presenting above, but also on 3D product views and plain images, including image galleries. Hotspots are also compatible and combinable with "interactive product tours", as shown in the next tab above.
But, it is also easily possible to integrate the hotspot editor into existing applications without using AJAX-ZOOM modules! By default setting the JSON-like code generated in this hotspot editor is stored in a file. However, you can also store this data into a database table or wherever else. Within the code of the hotspot editor, there is a possibility to change the storage method and location over a code switch. When you do so, the get and put actions redirect to an AJAX controller path of your choice. Within the controller, you decide what happens with the data or where it comes from.Checkout the hotspot editor or read more on this page...
With this image viewer, you can display high-resolution, ultra-high-resolution, and less-resolving images responsively. You have the choice to enable or disable any control element or place it differently. Swiping between high-resolution images has never been easier and faster before.
In addition, you could add the so-called hotspots (interactive in-the-image markers), control the player externally via API, and expand the functionality as desired. In the download package, you will also find various examples where you can combine this plain image viewer with our 360° degrees or 3D product viewer and add various video players.
The slider works well on mobile devices and obeys intuitive gestures such as multi-touch pinch zoom or swipe. Considering that this is a multiscale resolution image viewer, there is not too much more one can expect from it to make it better. However, we are constantly looking to improve the performance and functionality.Proceed to basic plain image viewer example integration or read more on this page...
For a 360 or 3D web-view, the settings in this example are set the way that the user has only the possibility to spin at none zoomed state. Upon a click, the image or 360 will zoom to its original size. Another click at zoomed state causes the image to full zoom out again. Additionally, a zoom-out button appears when zoom on the image is applied.
The above-described behavior is actually typical for many none multi-resolution players, where the original heavy image is entirely loaded at 100% zoom. With AJAX-ZOOM viewer, however, the user does not have to wait until this large image is fully loaded. AJAX-ZOOM loads only that part of the zoomed image, which is visible on zoom, and the view gets sharp immediately without the user need to download several megabytes of unrequested data volume. On fast connections, the user will not even notice that this part of the image is downloading because the corresponding "image tiles" are loaded while zooming transition runs, and the tiles are faded in straightly after the zoom animation ends or even earlier while the animation runs.
This reasonably simple concept is mainly used for showing detailed maps online. Google maps use this, and actually, any maps service uses this, as it would be strange if you needed to download the entire world map to view your neighborhood, right? With AJAX-ZOOM, you can take advantage of this technology without really understanding it. Simply use this zoom magic in your online store or product's website and profit from this deep zoom enlargement without worrying about image sizes being too large for a web view. The same is true for mobile users; it simply makes no difference.
It might be worth mentioning at this place that AJAX-ZOOM can also load original images instead of image tiles on zoom.
For this, you just need to activate the AJAX-ZOOM's
Moreover, you can set it the way that for low-resolution images, the original image loads on zoom, while for higher resolution images, the multi-scale tiles technology is applied.
The resolution threshold is adjustable over the same
Similar functionality with mixed content in one viewer (360/3D, video, and regular images) can also be achieved with this extension/example, where depending on the settings, you can enable mouseover zoom or swipe slider as a preview for your high-resolution images.Proceed to multimedia swipe gallery example and documentation or read more on this page...
3D photography views are multiline or multi-row 360 images. Photos of an object are taken not only from each angle horizontally but also from the same angles when the camera is shifted vertically following the spherical path. We call it a row or line. So talking about 3D in the AJAX-ZOOM viewer's software context implies that there are at least two 360 round views of the same product that have an equal amount of images in each of the round views.
AJAX-ZOOM supports the multi-row 360 images too. You can find an isolated example of a 3D product view in this example.
As of AJAX-ZOOM-related integration and file structure, the basic difference between 360° and 3D is that for 360°, you need to provide the path to a folder, where 360-degree image frames are located directly in this folder. Whereas for 3D, you need to provide the path to a folder, which contains further subfolders with images of each 360 round view in each subfolder. Once again, the number of image files in each subfolder must be equal. Also, all images must have the same dimensions - width x height. Otherwise, AJAX-ZOOM throws an error.
The naming of the files does not have to follow a specific scheme. You just need to name them the way that a machine can sort the image files using a regular sorting algorithm. However, you must name files in each folder differently. This rule applies to rows of a 3D view as well as different 360-degree views in general. The reason is the AJAX-ZOOM's caching caching mechanism that relies on this rule.Still have questions? Please contact or read more on this page...
AJAX-ZOOM has many possibilities to create pure picture galleries. Above, you can see a gallery with an "internal" thumbnail slider. By options' values, you can arrange the slider's position to be vertically (left/right) or horizontally (bottom/top).
Those internal galleries display within the viewer's box, and all the internal calculations aim to preserve the exact fitting of the entire viewer inside its parent container. Therefore, if the parent container has determined proportions defined by your CSS, the viewer will exactly fit into this HTML element and resize itself if that responsive parent container changes its size.
AJAX-ZOOM generates all resized representations of the larger source image automatically and caches them in a specified directory. There are several predefined methods to determine the array of images to load into the gallery. You can provide a list of individual image paths, or you can specify a local path to a folder from which AJAX-ZOOM will automatically read all supported image types and add them to the gallery.
You can provide this data manually while testing or when you have only a few pages with a hand-written input. When integrating it into a database-driven and structured system, you can extract the required data, e.g., image paths from template variables or request directly from the database.
Within the mouseover extension, you can set the gallery's position relative to the viewer statically (right, left, top, and bottom). Or, you can define several "breakpoints" and other parameters to position the gallery dynamically from a set of gravity directions. In the above configuration, the position is either left or bottom. When the width of the stage is less than 400px, which is an adjustable option, the bullet type of navigation replaces the gallery.
The thumbnail gallery, which is a separate and independent component of the mouseover extension, has many additionall configuration parameters. You could also entirely disable the thumbnail gallery and let the users switch between the items by swiping or pressing on the arrows or bullet navigation.
The proportions of the viewer can be "fixed", for example, by 1 or 1 by 1.5, the can correspond to the proporions of an image, or you can define to automatically determin the proportions via breakpoints.
Regardless of the order within the media gallery, any media element - a picture, a 360° product view, or a video can load first! That is especially important if you would like to open this mouseover extension in a modal window upon a click on your already existing gallery. Not that you necessarily would need a mouseover extension in a modal box, but that makes a lot of sense having specific options enabled or disabled; have a look at it!
For displaying an image, the extension only requires a path to the high-resolution "master" image. The image resizing takes place automatically. You can define the sizes of the thumbnails and the mouseover preview images separately. It is essential to point out that the mouseover zoom or slider does not load the high-resolution "master" image but a resized smaller version of it.
By default AJAX-ZOOM's core settings, the size of the flyout image (the image that shows in a flyout window when hovering the slider with the mouse) is limited to 1200x1200px. That is usually sufficient for a preview. When the user clicks on the lense, the high-resolution image opens in the AJAX-ZOOM viewer - either in a responsive modal box or immediately at fullscreen. The details of an image displayed in the AJAX-ZOOM viewer, including pictures of a 360-view, progressively load as the user zooms into it.
Within the AJAX-ZOOM media player, only parts of the large image required by dimensions and viewport are loaded so that, for example, a 50-megapixel image is visible immediately. You can even protect your high-resolution "master" images from access via HTTP, e.g., via directives in ".htaccess" file. AJAX-ZOOM needs to access those images only server-side. The same applies to the 360 images. If you do not want this sort of progressive loading, you can enable the "simple mode option" to load the big master image entirely whenever appropriate for a zoom level and screen size.Continue reading about mouseover zoom extension and testing or read more on this page...
If simple 360-degree views seem too boring, you could upgrade your spins with a "360° degree product tour", thus significantly increasing the user experience and informative capability of a 360 image at the same time. Please note that the 360 / 3D views enhanced in this way must have a resolution sufficient for zooming effect on large screens too. Due to the multi-resolution tiles technology, using large images does not affect the loading time, so you can even provide 50 million pixel 360 images to the AJAX-ZOOM 360 / 3D product viewer.
Thanks to the special editor, which is included in the download package and integrated into the backend of our modules, you can create these kinds of product tours incredibly fast and without any specialist knowledge! The editor offers the choice between various pre-programmed animation types, has input fields for descriptions of each viewport where you can place additional 360° degree view, panorama, or video from external sources. In addition, you can enrich the 360° degree product tour with hotspots (markings in the picture). Both enhancements are compatible with each other.
You can use this "product tour" not only for 360 images but also for 3D product views and normal flat images/galleries. This is achievable by creating the tours using the supplied crop editor or generally without it over the available API methods. The basic API functionality for cropping images and zooming illustrates this example for developers. Within the editor on ajax-zoom.com, you will also find the possibility to load alternative content, including a demo of a single image or gallery, and test it in real.
It is quite easy to integrate the editor into other existing applications than for which we already have created several modules. The JSON code, produced by the editor, can be saved into a JSON file or via AJAX controller action, for example, into the database. You will find the "360° Product Tour" editor already integrated into the backend of every AJAX-ZOOM e-commerce module and ready to use without any programming.Click here to see and test how "360° degree product tour" is made or read more on this page...
Suppose you have a two or more column responsive layout, where the main container's width is responsive too. That is a typical situation for CMS themes like the many modern ones available for WordPress today. Now you want to place high-resolution images between texts without having the users and Google preload heavy data on page load while providing a high-resolution image viewing experience on demand. AJAX-ZOOM is a perfect tool to implement exactly that. You will find the source code in this example.
With the provided AJAX-ZOOM
jquery.axZm.hoverThumb extension, you can adjust the mouse hover effect of the low-resolution preview image, group images by data attribute, and much more.
As HTML markup, only "img" tags with a few
data- attributes are required for the "jquery.axZm.hoverThumb" extension to notice them and connect to the AJAX-ZOOM viewer.
For the click event, you choose between replacing the preview image with AJAX-ZOOM viewer directly as shown on this page, opening the viewer in a responsive modal box, or opening it in fullscreen mode.
For embedding the player multiple times between a text and without hover effect, which is also possible for the 360-degree product views, please see this example.Proceed to isolated example
This is a highly flexible and customizable mouseover zoom extension that combines several unique technologies offered by AJAX-ZOOM. Because of its versatility, it is integrated into the front end of all AJAX-ZOOM modules for shopping carts. Administrators control the extension and set up the views via the backend section of those systems. You can, however, integrate it manually elsewhere.
The mouseover zoom extension is both - an image-zoom on hover plugin and a media/photo swipe slider. The latter automatically enable itself on touch devices. As with nearly all behaviors, that is an optional setting.
Additionally, you can add videos from YouTube, Vimeo, Dailymotion, or link to MP4 video sources. MP4 videos can load in the "VideoJs" player or natively in the browser's HTML5 video player.
|"axZmMode"||- on - off||Let the "zoom on hover" extension behave as regular AJAX-ZOOM with deep zoom.|
|Inner zoom:||- on - off||Display zoom on mouseover within the image container instead of the flyout window. This does not apply for 360 images.|
|Mouseover zoom:||- on - off||Enable / disable the slider functionality by disabling zoom on hover.|
|"maxZoomMode":||- on - off||Zoom to the maximum level on click for the AJAX-ZOOM view.|
|Thumbnails gallery:||- on - off||Enable / disable the thumbnails gallery.|
|Gallery position:||Position of the thumbnails gallery. When there are two gravities, AJAX-ZOOM decides where to place the gallery.|
Click on the buttons below to open a single image, images gallery or 360-degree images in a modal box, full browser window or fullscreen.
As viewers' content, you can choose a single high-resolution image, a set of images with or without a thumbnail gallery, or a 360-product view.
Using the new "APP container," you can open any other AJAX-ZOOM extensions or examples that require an HTML template in a modal box too. For example, you can open the AJAX-ZOOM mouseover extension containing images, 360-views, and videos altogether in this "APP container" extension.
This example demonstrates the basic procedure to open AJAX-ZOOM in a modal box using a few scripts, including the new "APP container" extension. With the information in that example, you can adapt your favorite modal component that accepts HTML as content to show AJAX-ZOOM viewer in it.
Suppose your task is to present a thumbnails gallery with zoomable images on click. In that case, AJAX-ZOOM offers several extensions that automatically generate such a gallery and open the viewer in a modal box or immediately as a full-screen view.
You can choose to load all images from a specified folder or provide a list of image paths from different folders. When choosing to load all images in a specified folder, AJAX-ZOOM will add images uploaded later automatically. It instantly creates all missing thumbnails, and when the user clicks on one of those, the image opens in the AJAX-ZOOM viewer in a way that you specify it within an option of that particular extension.
By default, AJAX-ZOOM viewer loads high-resolution images progressively using multi-scale technology with image tiles. That way, even ultra-high resolution images are viewable by your customers without the delay of having to wait for downloading the entire picture. However, you can also disable the multi-scale presentation that uses progressively loading image tiles and load the source image instead. However, a small representation of the large image as a whole will still load first, giving the customer the ability to see some details quickly.
These are the AJAX-ZOOM examples that use the
The documentation is there too.
All examples and AJAX-ZOOM extensions are included in the download package.
Using iframes is a quick and straightforward way when you want to place many 360 rotary views or several images with the deep zoom simultaneously on one page or just do not want to modify any codes of your CMS system.
Among many other options, you can configure the 360 / 3D product views to load instantly or start preloading single images after the user clicks on the viewer. Inside the responsive iframe, the AJAX-ZOOM player adjusts its size automatically whenever the dimensions of the iframe change.
Please note that provided you are following the proposed way of integration in example13, "fullscreen view" will also work in IOS Safari without opening a new window. Usually, this is only possible for videos inside an iframe. Thus, embedding this 360 product viewer or plain image zoom viewer via iframe will lead to no noticeable difference compared to regular integration. You can confirm this also on the desktop by clicking on the fullscreen button at the brown shoes 360-view example below.
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.
AJAX-ZOOM is a powerful, self-hosted, and universally applicable image zoom & pan software with an additional 360° degree / 3D object rotation functionality, a zoom-on hover extension, and other extensions that create several types of image galleries. It has all features for implementation into responsive and non-responsive layouts.
With this fully-featured solution, it is possible to present even ultra-high-resolution photos and 360 product views online in the best quality. Via the approximately 400 optional parameters and CSS, AJAX-ZOOM is a very flexibly configurable and skinnable software solution. You can disable or change the appearance of all the UI controls. Seamless integration into any web page is guaranteed.
All you need is, e.g., a LAMP (Linux, Apache, MySQL, and PHP) webserver. However, you can also implement AJAX-ZOOM into ASP.NET / IIS web applications without PHP via "Phalanger". For optimal quality and speed, AJAX-ZOOM offers full support for ImageMagick®, although LibGD, which is a part of any default PHP installation, is normally sufficient. The supported image file types are JPG, TIF, PNG, BMP, GIF, and PSD (TIF & PSD only with "ImageMagick").
Other than some of our "competitors", we never claim that AJAX-ZOOM is the best media or image viewer. We also do not brandmark it as "original" concerning specific functionality. As for the "best" viewer software in general, we believe that this highly depends on user preferences and fields of application. Being "original" in this and that, well, do not always believe in what marketing people tend to write lucking any other arguments. But frankly, competition? What competition?
AJAX-ZOOM uses image tiling, multi-resolution technology. It dynamically loads only requested parts of the high-resolution image, which depends on the zoom level, viewport, and screen resolution. As you can also see in the Google Maps application, the view visibly gets sharper on zooming and panning when interacting with the map.
AJAX-ZOOM can process image tiling "on the fly," or it can batch convert thousands of images with just a couple of steps. You will find a PHP-based script in the download package, where you can select folders containing many images and batch-process them automatically. That means that you can easily integrate AJAX-ZOOM into already productive websites within the shortest possible time. Your high-resolution master/source images are not changed.
Specific settings can also set AJAX-ZOOM to protect the source images to the extent that AJAX-ZOOM is suitable for commercial image providers. For example, you can set and adjust options for automatic watermarking of the image tiles and all other cached images. Since the original, large image never loads into browser cache, the entire parent directory, which contains high-resolution images, can be protected, e.g., with ".htaccess" from being accessed over the internet.
However, starting from AJAX-ZOOM version 5.3.0, AJAX-ZOOM can also load the original image ("simpleMode" option) instead of image tiles whenever it is suitable, e.g., on zoom. In this case, the image loads entirely into the browser's cache, which is fine for smaller resolution images. Approximately up to 3 - 4 million pixels, the performance losses are negligible on modern devices. Depending on the license type, you can also set a resolution threshold to either load the original image directly or use multi-resolution image tiles.
AJAX-ZOOM works in all modern browsers but can also work in legacy IE 9 for the most features. On mobile touch devices, AJAX-ZOOM supports pinch-zoom, double-tap, and two fingers zoom & pan. On Windows devices, which have a mouse control and touchscreen, AJAX-ZOOM works excellent for touch interactions on screen too.
AJAX-ZOOM has an extensive library with API functions, callbacks, hooks, and many extensions. With the API functions and callbacks, you can create sophisticated web applications without modifying the actual AJAX-ZOOM code. Our team can tailor customized templates (blueprints) to streamline your project. If necessary, we extend the AJAX-ZOOM's core functionality and provide it with the next update.
Extensions include, for example, the hotspot editor, mouseover zoom, or various gallery scripts. Those extensions make use of AJAX-ZOOM API functions or callbacks and are structurally very similar to any jQuery plugin controlled by options.
For instance, you can view such a simple extension in example21. In this extension, AJAX-ZOOM reads several images from different directories and displays them as a thumbnail gallery. The user can switch between the folders by clicking on a folder icon generated automatically. When the user clicks on a thumbnail, that image opens in the AJAX-ZOOM viewer.
The download package contains several more complex extensions than that. For example, even though it is for an exceptional niche usage, example34 could serve as a good case for far-reaching use of the API. In this example, several images of an old newspaper load into a canvas with a thumbnail gallery. Before uploaded to the server, they were subject to an OCR scan, with the position and dimensions of each word stored in XML files. Users can search for a word or expression using the autosuggest field, and if available, retrieve a list of pages with search results below that search field.
When the user clicks on an object representing a search result, the corresponding page loads, and the word found on that page visually gets marked by a rectangular overlay.
These actions, such as switching the page, marking with rectangular overlay, and simultaneous zooming to the selected word, are triggered by AJAX-ZOOM hotspot API methods.
There are several different ways to integrate AJAX-ZOOM into your website. The easiest way to get to know about this is to inspect the examples. There is, of course, no best way because it depends on your requirements, the way AJAX-ZOOM should look, and other factors. Therefore, the following example represents one of many possible solutions:
You can examine the above code in the HTML source of example9.
It loads a simple gallery with horizontal slider but you could also load a 360 / 3D by changing
ajaxZoom.parameter to e.g.
ajaxZoom.parameter = "3dDir=/pic/zoom3d/Uvex_Occhiali&example=17" where
"3dDir" parameter is the path to the folder with 360 images and "example" is the parameter, which defines the configuration set loaded for the player.
You can easily extend configuration sets or change existing ones in
Read more about that in the AJAX-ZOOM configuration options system explained in detail article.
Iframes, however, are the simplest way to handle many players with e.g. rotatable product views or high-resolution images with zoom at the same time. The AJAX-ZOOM player automatically adjusts itself to the responsive iframe size and can be brought to full screen view by users, which even works in IOS Safari (iPad, iPhone). In example13 you can see many examples of integrations over iframe including lazy loading iframes.
We are constantly working to improve the software. Your wishes, objections and suggestions are greatly appreciated. Below are some thoughts on key features, which should be implemented.
|2018-08-10||Complete rebuilt of the AJAX-ZOOM batch tool. Amongst other improvements and features, the new batch tool allows to generate 100% of all cache needed for the frontend, set important options over the menu, save these options into an external file to load in a different session and preview images directly in the AJAX-ZOOM player.|
|2018-06-29||New "simpleMode" option and "Simple" license type released. The "Simple" license does not have number of images restriction (unlimited) and is more affordable.|
|2017-11-07||Added support for PHP 7.1 / 7.2|
|2017-08-16||All examples are now responsive out of the box|
|2017-08-04||Galleries use now smooth and animated swipe gesture for desktop and mobile devices|
|2017-06-27||Substantial increase in performance of the smoothness during interactions within the player across all devices|
|2017-06-11||AJAX-ZOOM iFrame embedding can now be triggered fullscreen on mobile devices including IOS|
|2016-09-30||OXID eCommerce AJAX-ZOOM module released|
|2016-08-03||Hotspot editor has been heavily revised, new features... ready for integration into modules...|
|2016-05-04||WordPress WooCommerce AJAX-ZOOM Plugin released|
|2016-04-25||Integrated 360° / 3D "Product Tour" for mouseover zoom|
|2016-03-07||Works now on Windows notebooks with touch display including pinch zoom on Windows 8 / 10 with Chrome... (touch events), IE 11 and Edge (pointer events)|
|2016-01-20||Opencart AJAX-ZOOM Plugin released|
|2015-12-07||Shopware AJAX-ZOOM Plugin released|
|2015-09-14||New Magento AJAX-ZOOM module released|
|2015-07-26||Brought back AJAX-ZOOM ASP.NET Phalanger edition|
|2015-06-20||PrestaShop AJAX-ZOOM module released|
|2015-04-07||New fully responsive mouseover zoom|
|2015-03-15||All examples reviewed or replaced. New functions, several optimizations|
|2013-02-18||Countless bug fixes and new features such as long-awaited hotspots|
|2019-04-02||AJAX-ZOOM «expandable button» extension|
|2019-02-20||AJAX-ZOOM thumbnail slider extension - axZmThumbSlider|
|2019-01-29||Rotate 360 product view on window scroll|
|2019-01-22||The AJAX-ZOOM configuration options system explained in detail|
|2019-01-15||Cleverly set height and proportions of the AJAX-ZOOM parent HTML container in responsive layouts|
|2019-01-08||How to add an HTML element to the AJAX-ZOOM viewer|
|2018-07-17||180° product photography / AJAX-ZOOM «spinBounce» option explained, including photography / rendering examples|
|2018-07-16||How many photos are needed for a 360° product spin?|
|2018-07-11||Amazing multi-resolution 360° anaglyph (stereoscopic) object photography example|
|2018-07-09||Visualization and explanation of the new AJAX-ZOOM «simpleMode» option|
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!