Latest version: 5.4.1 (Change Log)
Release date: August 8th, 2019
Download AJAX-ZOOM Software

AJAX-ZOOM extension for Magento

In the frontend of Magento's product detail page, AJAX-ZOOM plugin for Magento replaces the default viewer with the responsive image zoom on hover + optional 360° + videos AJAX-ZOOM extension.

Optionally, you can insert the 360 product views into a tab or elsewhere on the page by using a definable jQuery selector. In the latter case case, the default image viewer remains, or you can replace it with a different third-party plugin. Thus, there is also a possibility to use the plugin only for 360 product views.

In the backend, administrators can upload several 360 product images or import them from ZIP files, which were previously uploaded, e.g., over FTP. You can configure each 360 product view with individual settings and assign it to a combination of associated products. Accordingly, at the frontend, the plugin connects to the color-swatch and variations selection, and besides images, it can switch 360 product views as well.

Furthermore, there is an option to define videos from YouTube, Vimeo or link to mp4 stream. Same as with the 360 product views, you can assign these videos to only certain product variations and even define different video sources for different languages!

The optional "product tours" and interactive hotspots that are definable via integrated editors are the icing on the cake in this plugin.

For your regular product images, there is no need to change anything. Though, you can add clickable and interactive hotspots to them too.

* - You do not need to download AJAX-ZOOM main script separately as the module can instantly download the latest version of AJAX-ZOOM during the installation. However, since this can fail you might need to upload AJAX-ZOOM main script manually, see Troubleshooting.

You can download the AJAX-ZOOM plugin for Magento and test it in your development environment! Test it thoroughly before you buy.
The Magento logo above is used for illustration. AJAX-ZOOM is not affiliated or in partnership with Magento. This AJAX-ZOOM extension for Magento is not an official extension of Magento company.

General features

Backend screenshots

Backend: 360 degree interactive "Product Tour"

The 360 "product tour" editor is straightforward to use. Simply select areas of interest in your 360-view and hit the crop button. The editor instantly generates thumbnails of these areas and place them into the thumbnails gallery. At the front end, when users click a thumbnail, the player spins and zooms to this selected area depicted in the thumbnail.

Backend: 360 degree views with hotspots

The 360 hotspots editor offers extensive options for placing clickable markings on your 360 views. It is integrated directly into the backend section of your Magento installation. Hotpots and 360-degree product tour are compatible with each other. You can apply both to the same 360 product view.

Backend: Videos - YouTube, Vimeo, Dailymotion, MP4

With this widget, you can define videos from YouTube, Vimeo, Dailymotion or link to mp4 videos located elsewhere. For variable product, you can associate videos only with certain product variations. Also, you can, but not obligated to, define alternative video sources for shop languages.

Backend: Batch Tool

You do not necessarily need to use the AJAX-ZOOM batch tool, because if image tiles and other AJAX-ZOOM caches have not been generated yet, AJAX-ZOOM will process the images on-the-fly. Latest, when they appear at the frontend. However, if you have thousands of images, it is a good idea to batch process all existing images, which you plan to show over AJAX-ZOOM, before launching the new website or before enabling AJAX-ZOOM at frontend.

Frontend screenshots

Frontend: 360 degree interactive "Product Tour"

Handling regular images

For the regular images, there is no need to do anything. You can upload them as always.

Backend: Hotspots on regular images

You can add hotspots to your plain product pictures. That does not change your images physically! At front view, your users can see the hotspots at the full-screen view or when the viewer opens inside the responsive Fancybox implementation. For immediate visibility, activate the axZmMode option in AJAX-ZOOM module settings.

Handling 360°/3D

To add 360° images go to "Catalog" -> "Manage Products" and select a product you want to edit. If it is a "configurable product", you can set all you 360 directly in the configurable product and attach them to "associated products" as you wish. Anyway, if the module is installed there should be a new AJAX-ZOOM tab on any product type. In this tab you are able to:

Requirements

Installation

Magento Connect

  1. Go to System -> Magento Connect -> Magento Connect Manager and login
  2. Upload package file...
  3. Please note that if you remove AJAX-ZOOM over Magento Connect Manager and will install it again, you will need to DELETE FROM `core_resource` WHERE `code` = 'axzoom_setup' for the installer to complete the process.
  4. All settings are under System > Configuration -> AJAX-ZOOM

Manual installation

  1. Make sure your server and Magento requirements are met!
  2. Download AJAX-ZOOM extension for Magento, unpack AJAX_ZOOM-x.x.x.tgz file preserving the folder structure and upload into magento root
  3. It is recommended to set chmod 777 or similar (depending on server settings / owner) for "/js/axzoom/pic" and "js/axzoom/tmp" directories.
  4. Go to System -> Cache Management and click on 'Flush Magento Cache' and 'Flush Cache Storage' buttons.
  5. Logout/login to admin area
  6. All settings are under System -> Configuration -> AJAX-ZOOM

Disable the extension

Open /app/etc/modules/Ax_Zoom.xml and set <active>false</active>

Layout options / blocks

AJAX-ZOOM can be placed on the product detail page in three primary ways. The default way is that the media.phtml template file is replaced by the AJAX-ZOOM plugin media.phtml file. The zoom on hover is enabled, and you can display images, 360 spins, and videos within one viewer.

Demo Magento Mausover Zoom (default)

If you do not want to have the mouseover zoom for regular images as the preview, you can enable the "axZmMode" option. That lets users to deeply zoom into the images without any previews using image tiles technology, similar to Google maps, where the image gets sharp when you zoom in. The basic functionality is similar to what Magento 1 had in former versions, where there was a slider under the images for zooming in. Enabling "axZmMode" option replaces the standard images display (media.phtml) as well.

Demo "axZmMode" option enabled

Starting from AJAX-ZOOM plugin v. 1.4.2 for Magento, you can keep the standard images viewer from a theme or use a different third-party plugin for "media.phtml" block area. In that case, AJAX-ZOOM plugin does not replace the media.phtml. Instead, AJAX-ZOOM viewer appends to some HTML element on your product detail page, e.g., it can be appended or prepended to your product description. You can achieve it by defining the "displayInSelector" option. The value of this option must be a jQuery selector, e.g., in the default "madisonisland" skin, if you want to append the player to the product description, the value for "displayInSelector" option would be .tab-content:eq(0) (first element with the tab-content CSS class). The special about this option is that only 360-degree spins, videos, and images, for which you have defined at least one hotspot in the admin area, are added to the items collection that displays in the AJAX-ZOOM viewer. If you want to exclude the image that has hotspots from showing in parallel in your standard images viewer at the top of the page, you can ban it by the Magento own images exclude checkbox at the backend. It will still display in the AJAX-ZOOM viewer aside from main images view regardless of that exclusion.

Demo display in selector / "displayInSelector" option set

Troubleshooting

General

During installation, the installer downloads AJAX-ZOOM automatically. In some cases, e.g. allow_url_fopen is disabled or a timeout occurs, the process can fail without notice. Please check that the folder /js/axzoom/axZm exists and it is not empty. If it does not exist or it is empty, please download AJAX-ZOOM from our page and extract only the axZm folder into /js/axzoom/axZm manually.

Also please check that the following folders were created and are writeable by PHP!

No visual changes on product detail page (JavaScript error)

The zoom script triggers by the inline JavaScript code that is inserted via media.phtml. If there is a JavaScript error caused by a different plugin, which occurs above or before the AJAX-ZOOM initialization code, the browser stops there, and consequently, AJAX-ZOOM script does not trigger. Press the F12 button to open developer tools (best use Chrome) and make sure that there are no JavaScript errors in the console. Track the errors down to a plugin that inserts this poorly written JavaScript and temporarily disable the suspicious plugin to make sure you are on the right path. Contact the developer of this plugin with the issue you have.

No visual changes on product detail page

If you do not see any changes on the detail page, then the media.phtml file from /app/design/frontend/base/default/template/ax_zoom /catalog/product/view/media.phtml is not loaded. There must be some other media.phtml that loads instead. Perhaps this is media.phtml from another extension or media.phtml that is defined in local.xml of the theme. Please find out which media.phtml loads, backup this file and replace it with media.phtml from the above path ("AJAX-ZOOM media.phtml"). Another solution would be to remove "setTemplate" from XML which loads a different media.phtml. However, this directive can also be in the module controller of that extension, so the prior solution should work for testing purposes at first.

RewriteBase (e.g. Bitnami / Magento / XAMPP)

If RewriteBase is set in .htaccess or app config file or similar you might need to change some settings in AJAX-ZOOM config file (/js/axzoom/axZm/zoomConfig.inc.php) to make things work properly. Having tested AJAX-ZOOM extension on PC (localhost) with Magento package from "Bitnami" (default settings) we were able to get AJAX-ZOOM working under these conditions: the url path to magento was http://192.168.178.27/magento, whereby the document root on PC was C:/xampp/apps/magento/htdocs and not C:/xampp/apps/magento/htdocs/magento as one would expect. This is due to RewriteBase which is enabled on default. Also the document root here changed from standard XAMPP root which is C:/xampp/htdocs; so as of now all these settings need to be set manually in /js/axzoom/axZm/zoomConfig.inc.php for AJAX-ZOOM this way:
  • $zoom['config']['fpPP'] = 'C:/xampp/apps/magento/htdocs';
  • $zoom['config']['urlPath'] = '/magento/js/axzoom';
  • $zoom['config']['rewriteBase'] = '/magento';

Images are not showing in frontend I (Ioncube missing or /js/axzoom/pic chmod issue)

If AJAX-ZOOM seems to load as shown on the screenshot to the right but images are not showing:
  • Make sure Ioncube Loaders are installed!!! You can call www.your-domain.com/js/axzoom/axZm/zoomLoad.php in your browser and see if you get an error related to Ioncube.
  • Make sure that subfolders of /js/axzoom/pic/ are present and are writeable by PHP (chmod)! If /js/axzoom/pic is empty - has no subfolders, then /js/axzoom/pic was not writable by PHP during install and therefore subfolders were not created. You could simply create these subfolders manually and make them writable:

    • /js/axzoom/pic/360
    • /js/axzoom/pic/cache
    • /js/axzoom/pic/tmp
    • /js/axzoom/pic/zoomgallery
    • /js/axzoom/pic/zoommap
    • /js/axzoom/pic/zoomthumb
    • /js/axzoom/pic/zoomtiles_80

  • Does not help? Contact our support!

Images are not showing in frontend II (Error 404 or 500 on /js/axzoom/axZm/zoomLoad.php)

If AJAX-ZOOM seems to load as shown on the screenshot above but images are not showing:

Some (shared) hosts do not allow to execute PHP files if they can be edited by "group". In server error log files you will find something like that: SoftException in Application.cpp:313: File "/home/abc/public_html/js/axzoom/axZm/zoomLoad.php" is writeable by group, which causes Server Error 500 or Error 400 (not found), when calling /js/axzoom/axZm/zoomLoad.php.

In this case make sure that the folder /js/axzoom/axZm and its subfolders are chmod 0755 and the files within it are chmod 0644.

This does not relate to subfolders in /js/axzoom/pic/. They can be kept (and probably must be kept) at 0775 or higher.

Fatal error: Class 'Ax_Zoom_Helper_Data' not found in /htdocs/app/Mage.php on line 547

Recompile (System->Tools->Compilation) or disable compilation at first…

Color Swatches

There are several color swatches extensions for Magento, mainly used before Magento 1.9.0 was released where fundamental "color swatch" functionality was finally implemented without any extensions. However many shops continue to use their "color swatch" extensions because they do not want to change their data. AJAX-ZOOM does support "color swatches" for Magento 1.9+, but it can also work with external color swatch extensions! If you do not get it to work on your own, please contact us for support. Following are gathering fixes for "color swatch" extensions we had to deal with:

Other

If you encounter any other troubles, please report / contact our support. We will fix and document it with highest priority.

FAQ

How to install "ionCube Loader"?

ionCube loader is a widely used PHP extension, and it is required to operate AJAX-ZOOM on your server. Before installing the loader, please check if it is not already installed on your server. To check this, you can look into the output of phpinfo();. You can also use get_loaded_extensions PHP function - print_r( get_loaded_extensions() ); to see if ionCube is installed.

If you do not detect ionCube on your server, please visit the official ionClube loaders page. There you can find "Loader Installer" and "Loader Wizard", which guide you guidance on installing the loader that matches your operating system (Windows, Linux, FreeBSD, OpenBSD, OS X, Solaris).

Many hosting companies do also have a guide in their FAQ on how to do this specifically for their configurations. Lastly, a mail to your hosting’s provider support surely helps. ionCube is industry standard and should be a copy & paste answer for your hosting provider. If not, you should switch your hosting provider immediately.

Please note, that each PHP version requires a different loader extension. When your provider offers a possibility to switch between several PHP versions, and you have added ionCube extension over a separate php.ini on your own, please think about updating this php.ini file to link to the appropriate ionCube extension file.

Restarting the Server (e.g. Apache) might be needed for the new extension to load (changes in php.ini effectively occur).


Some shared hosting companies such as "1&1" allow the users without root access to create their custom php.ini files and "install" Ioncube loader this way. However, this custom php.ini has only effect on the folder where into you place it. It has no impact on subfolders as you might suspect. Therefore, if you are dealing with this method of installing the loader, you must copy your custom php.ini into several folders. If AJAX-ZOOM module for your system installs itself into, e.g., /modules/ajaxzoom directory, you must place the custom php.ini into /modules/ajaxzoom/axZm/ folder and into, e.g., /admin12345/ folder (or wherever installing the modules takes place).

Do I need a license key to test AJAX-ZOOM module / plugin?

No, AJAX-ZOOM should work out of the box. For some modules / plugins, AJAX-ZOOM does not install itself, if "ionCube" extension is not present on the server (see above). Other than that, there is are limitations on the number of images and image resolution of the demo version. If you would like to test AJAX-ZOOM with higher resolution images ( > 3.2 megapixels / million pixels), please request an "Evaluation" license key for your dev domain / subdomain free of charge.

If you do not have a development server but would like to install AJAX-ZOOM plugin on your production website, you should go to module / plugin settings and set "displayOnlyForThisProductID" option. This option allows you to enable AJAX-ZOOM only for specified product ID, so you can test the module / plugin thoroughly without affecting the entire shop / conduct A/B tests.

How to translate the plugin into other languages or change text strings?

The translation of the strings is done over the plugin options and within the AJAX-ZOOM core PHP config file.

1. All plugin options are accessed over backend. For example, if you want to add Russian translation to "zoomMsg360" option, which is defined as JSON, you would need to add "key" and "value" to this JSON.

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "de": "Ziehen um 360° zu drehen, zoomen mit dem Mausrad, rechte Maustaste ziehen verschiebt die Ansicht",
    "fr": "Faites glisser pour tourner à 360 °, faites défiler pour zoomer dans et hors, cliquer et faire glisser à droite pour vous déplacer",
    "es": "Arrastrar para girar en 360º, Rueda del ratón para utilizar el Zoom, botón derecho para mover la imagen"
}
    

So when you only need English as default language (please keep it) and want to add Russian translation string, you would change this option to

    
{
    "en": "Drag to spin 360°, scroll to zoom in and out, right click and drag to pan",
    "ru": "Крутить 360° левой кнопкой мыши, колесом увеличивать, правой кнопкой смещать zoom"
}
    

2. Some other text strings are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php file, which is part of AJAX-ZOOM core. Open this file in a text editor and find a string you are looking for. For example, you are looking for the "Click to load" message. It is located under $zoom['config']['spinNoInit'] option and looks like this:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => false,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
view', 'de' => 'Klicken um die
360° Ansicht
zu laden' ), 'event' => 'click' );

As you can see, this is a PHP array, and there are several other suboptions located in it. Best way to proceed is to either copy the entire array into zoomConfigCustomAZ.inc.php or copy only the suboption with locales into this file. You can find zoomConfigCustomAZ.inc.php outside of the /axZm folder in the plugin directory.

2a. The below is what you would add to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file when you copy the entire array and add your translation, removing languages you do not need:

    
$zoom['config']['spinNoInit'] = array(
    'enabled' => true,
    'file' => array('en' => 'click_to_load_en.png', 'de' => ''),
    'txt' => array(
        'en' => 'Click to load
360°
view', 'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид' ), 'event' => 'click' );

2b. Or you could just add the suboption to [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php file like this:

    
$zoom['config']['spinNoInit']['txt'] = array(
    'en' => 'Click to load
360°
view', 'ru' => 'Нажмите мышкой, чтоб загрузить 360° вид' ); // or $zoom['config']['spinNoInit']['txt']['ru'] = 'Нажмите мышкой, чтоб загрузить 360° вид';
You can also move the file [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php one level up, outside of the "ajaxzoom" plugin directory, so when you update the plugin this file does not get overwritten.

3. There is also a third possibility how to add a translation to strings, which are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php. In the backend, under plugin configuration, you can find "azOptions" and "azOptions360", which allow you to override configuration from [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php related to frontend display. If we wanted to do the same as above over "azOptions360" plugin option (which is saved into the database), the result in your textarea would look like this:

Here, we do not need to define English, as the related JavaScript object will get extended by what you define in "azOptions360". The possibility number 2 above (writing into [ajaxzoom plugin directory] /zoomConfigCustomAZ.inc.php) is not applied then.

Download / Prices

There is no need to order AJAX-ZOOM before you have successfully installed and tested it!

You do not need to download AJAX-ZOOM main script separatly as the module can instantly download the latest version of AJAX-ZOOM during the installation.

The license price primarily depends on the number of different images, which are displayed on a domain in the AJAX-ZOOM viewer. For the complete license agreement, please visit the download section.

Changelog

Ver. 1.5.3
2019-03-24
Changed PHP max version in package.xml to support PHP 7+
Ver. 1.5.2
2019-03-20
Changed the way how AJAX-ZOOM tab is created at the backend when editing the product. In certain cases, this tab button could not be created previously.
Ver. 1.5.1
2018-12-12
Fixed a bug while saving the data for the new "Simple" license.
Ver. 1.5.0
2018-08-26
Implemented the AJAX-ZOOM cache batch tool directly into the plugin configuration section.
Ver. 1.4.5
2018-07-25
Small corrections in media.phtml file.
Ver. 1.4.4
2018-06-29
Small adjustments and notes for the new AJAX-ZOOM (core files) "simpleMode" option and "Simple" license type.
Ver. 1.4.3
2018-06-12
Small improvements
Ver. 1.4.2
2018-05-28
  • Added a possibility to display per option the 360 || videos || images with hotspots e.g. after product description or anywhere else per jQuery selector. Images with hotspots can be disabled from gallery view, but will load inside AJAX-ZOOM player if they have hotspots configured.
  • Fixed missing jQuery core lib at the backend, when Magento "Merge JavaScript Files" option is enabled.
Ver. 1.4.1
2018-03-26
Small improvements
Ver. 1.4.0
2017-12-14
  • Advanced video handling (YouTube, Vimeo, mp4 ...)
  • Hotspots for regular images
  • UI improvements
  • General improvements
After update you should navigate to System -> Configuration -> AJAX-ZOOM and under "Actions" tab press on "Update Database" button. In case "Cache Storage" under System -> Cache Management is enabled, please refresh caches.
Ver. 1.3.3
2017-11-28
Small improvements
Ver. 1.3.2
2017-10-24
New options
Ver. 1.3.1
2017-06-27
Magento marketplace fixes
Ver. 1.3.0
2017-06-25
Implemented the new mouseover version 5 into Magento.
If you update from the previous versions please navigate to AJAX-ZOOM extension settings and reset options under actions tab. This is really important as you will have misconfigured player at the frontend if you do not do that. Also please make sure that you have latest AJAX-ZOOM version (update js/axzoom/axZm foder).
Ver. 1.2.4
2016-08-22
Fixed admin permissions on hotspots editor and 360 product tour for localhost. Removed dependencies for installation.
Ver. 1.2.3
2016-08-12
  • Integrated new hotspot editor.
  • Updated 360 product tour editor.
  • Some other issues were fixed.
Ver. 1.2.2
2016-08-03
Fixed database table prefix issue reported today
Ver. 1.2.1
2016-05-15
Minor improvements
Ver. 1.2.0
2016-05-07
Added 360 degree "Product Tour"
Ver. 1.1.4
2016-04-22
Minor improvements
Ver. 1.1.3
2016-04-07
Minor improvements
Ver. 1.1.2
2016-03-31
Minor improvements while uploading 360
Ver. 1.1.1
2016-03-16
Force loading jQuery migrate at the backend even if jQuery is already present as migrate might be missing
Ver. 1.1.0
2016-03-03
Fixed the bug where activating Backend > System > Configuration > Web > URL options -> "Add Store Code to URLs" caused error in backend of the extension.
Ver. 1.0.1
2015-09-14
New Magento mouseover module released

Comments (8)

Vadim Jacobi 2018-07-17 23:32:10
Vadim Jacobi @Michael: we are currently reviewing the newest Magento 2 version to see if the problems / bugs we were facing with in Beta and early Magento 2.0 versions are resolved. Since then, we temporarily stopped the development. If everything is more or less fine by today, we will proceed with the development this summer. The estimated time of release in this case will be end of the summer / early autumn 2018.
Michael 2018-07-16 19:12:07
Michael What is the ETA for the Magento 2 version?
Shiv 2017-04-10 10:12:43
Shiv Hi, Looking for the same but required for Magento 2.0.* . please realease new version compatible for mag 2.0 as soon as possible. thank you
Vadim Jacobi 2016-08-03 15:38:12
Vadim Jacobi Database prefix issue is fixed in Ver. 1.2.2
Vadim Jacobi 2016-08-03 14:47:45
Vadim Jacobi It seems that there is a bug in the installer. Tables are created without database prefix. You can rename / prefix the tables manually right now to solve this problem. We will however fix this bug ASAP with the next update.
gauri shankar 2016-08-03 13:48:43
gauri shankar After installation i am getting following error
"Base table or view not found: 1146 Table 'databasename.mg_ajaxzoomproducts' doesn't exist, query was: SELECT `main_table`.* FROM `mg_ajaxzoomproducts` AS `main_table` WHERE (id_product = '384')"

what is the solution for this.
Vadim Jacobi 2016-02-07 20:28:55
Vadim Jacobi Patrick: we could take a look if you send us the link to an article on a dev server with this problem over contact form. Thank you.
Patrick Romano 2016-02-07 19:55:06
Patrick Romano Hi my current template swatches is clashing with your extension. Can u help?

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

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!

Live-Support-Chat