Release date: July 9th, 2018
Current version: 5.3.2
Change log

AJAX-ZOOM extension for Magento

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.

In the frontend AJAX-ZOOM extension for Magento is based on responsive mouseover zoom + optional 360° example. In the backend there is a possibility for administrators to upload several 360's or import them from ZIP files, which were previously uploaded e.g. over ftp. Each individual 360° can be configured with separate AJAX-ZOOM settings and attached only to specific "Associated Products". There is no difference in the handling of the normal images, whereby you can add clickable and interactive hotspots to the normal images using the integrated hotspot editor. You also have the option to define videos from YouTube, Vimeo, Dailymotion, as well as links to mp4 video files, which are all presented in combination with 360° views and normal images in one player.

* - 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. However, since this can fail you might need to upload AJAX-ZOOM main script manually, see troubleshooting.

AJAX-ZOOM extension for Magento 2 is developing and will be available soon!

General features

Backend screenshots

Backend: 360 degree interactive "Product Tour"

The 360 "product tour" editor is very easy to use. Simply select areas of interest in your 360 view and hit the crop button. The editor will instantly generate thumbnails of these areas and place them into the thumbnails gallery. On the front end, when users click a thumbnail, the player will spin and zoom 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 backend section of your Magento installation. Hotpots can be combined with the 360 degree interactive product tours.

Backend: Videos - YouTube, Vimeo, Dailymotion, MP4

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

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 you normal product pictures. The image file itself will be not changed! At front view, your users will see the hotspots at full screen or Fancybox. For immediate visibility, activate 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 will be 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 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 product detail page in three basic ways. The default way is that the media.phtml template is set to be loaded from the AJAX-ZOOM plugin for Magento. Mouseover zoom is enabled and you can display images, 360 spins and videos within this one player.

Demo Magento Mausover Zoom (default)

If you do not want to have the mouseover zoom for regular images as preview, you can enabled the "axZmMode" option. This will let the users deep 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 will replace 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 player from a theme or use an other third party plugin for media.phtml block area. AJAX-ZOOM plugin will not set its own media.phtml. Instead AJAX-ZOOM will be appended to any html element on your product detail page, e.g. it can be appended or prepended to your product description. This is done by defining the "displayInSelector" option. The value of this option should be a jQuery selector, e.g. on "madisonisland" skin, if you want to append the player to product description, the value for "displayInSelector" option would be ".tab-content:eq(0)" (first element with class tab-content). The special about this option is that only 360 degree spins, videos and images, for which hotspots are specified in admin area, will be added to the collection to be displayed in the player. If you want to disable an image with hotspots to be also shown in your standard images display at top of the page, you can simply exclude it by the Magento own images exclude checkbox at the backend. So in case this image has hotspots defined over AJAX-ZOOM plugin, it will be still added regardless the exclusion.

Demo display in selector / "displayInSelector" option set

Troubleshooting

Mouseover image does not show any more (sometimes)

In former module versions the "Pinterest" button was activated on default. Unfortunately the JavaScript for this Pinterest button was loaded from external source. Now this JavaScript was changed by Pinterest and it does produce JavaScript errors now, which might lead to mouseover images not loading properly. Please go to Backend of the Module and deactivate the Pinterest button!!! We will reimplement the integration without relying on external script from Pinterest as next.

General

During installation the installer downloads AJAX-ZOOM instantly. In some cases, e.g. 'allow_url_fopen' is disabled or time out 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 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

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

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

Ver. 4.2.11+ 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

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

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 when calling /js/axzoom/axZm/zoomLoad.php. In this case make sure that the folders are chmod 0755 and the files are 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 very basic "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 we will gather 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. In order 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 will find "Loader Installer" and "Loader Wizard", which will give you the guidance on installing the loader matching your operating system (Windows, Linux, FreeBSD, OpenBSD, OS X, Solaris).

Many hosting companies do also have a guidance in their FAQ on how to do this specifically for their configurations. Lastly, a mail to your hosting’s provider support will surely help you. ionCube is industry standard and should be a copy & paste answer for your hosting provider. If not, you should switch your hotsting 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 in order to the new extension be loaded (changes in php.ini effectively take 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 will not install itself, if "ionCube" extension is not present on the server (see above). Other than that, there is are limitations on 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 will allow you to enable AJAX-ZOOM only on 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 lookung 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 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 ajaxzoom plugin directory, so when you update the plugin this file does not get overwritten.

3. There is also a third possiblity how to add translation to strings, which are located in [ajaxzoom plugin directory] /axZm/zoomConfig.inc.php. In the backend, under plugin configuration, you will 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.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 backend, when Magento "Merge JavaScript Files" option is eabled.
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 naviagate 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 (6)

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 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