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.
Demo Magento frontend Download AJAX-ZOOM extension for Magento Download AJAX-ZOOM (not needed*)

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". For regular images there are no changes except when when other image handling modules are installed you might need to edit /app/design/frontend/base/default/template/ax_zoom /catalog/product/view/media.phtml to fit the logic of showing the images.

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

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

General features

  • Absolutly responsive mouseover area and flyout zoom window
  • Adjustable to fit the size of any responsive elements on the page over smart jQuery like selector
  • Adjustable for fixed or flexible image proportions
  • Permanent or automatic inner zoom depending on resolution and responsive layout
  • Supports Magento built in color swatch system (can be adjusted for other color swatch modules in media.phtml
  • Works great on touch-enabled devices
  • Optional 360°/3D support with (pinch) zoom and full screen view
  • Optional responsive thumbnails slider integration
  • Responsive modal or full screen views on click with AJAX-ZOOM
  • Fast "progressive" loading of high resolution images
  • Instant (on-the-fly) generation of all thumbnails
  • 100+ other options
  • All components adjustable over Magento module settings
  • API for developers of all skill levels
  • Continuous development and improvements, technical support

Backend screenshots

Backend: 360 degree interactive "Product Tour"

Backend: Hotspots

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.

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:

  • Define one ore more 360° spins for the product.
  • Upload 360° images right from the backend or
  • Select a zip file which contains images for a 360° set to import. On default these zip files have to be uploaded in '/js/axzoom/zip/' directory and can be removed after import.
  • After importing or uploading the images manually you will be able to make some adjustments for this particular 360°, e.g. change rotation speed and many other options available for AJAX-ZOOM.
  • Preview 360° in Fancybox before publishing.
  • Activate / deactivate 360° view.
  • Select combinations, e.g. color and size for which a 360° view should be shown. You can add more than one 360° view for a product.
  • Create a 360° "Product Tour" with descriptions, videos... No programming knowledge is required.

Requirements

  • PHP 5.2+ (same as recent Magento versions)
  • Ioncube Loader (free PHP extension)
  • ZIP
  • allow_url_fopen enabled (for instantly downloading AJAX-ZOOM main application and placing it in "/js/axzoom/axZm" directoy. If allow_url_fopen is disabled you will have to do it manually, please see "Troubleshooting" section on this page.)

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

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.

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:

  • "Color Swatches Pro" from Amasty
    In current (v3.11.5) "Color Swatches Pro" version you would need to change Product.Config.prototype.reloadImageBlock JavaScript function; this can be done by simply overwriting it in media.phtml Product.Config.prototype.reloadImageBlock = function(key){return false;} The function can be called from other Amasty code but it is now supposed to do nothing.

    For older versions where Product.Config.prototype.reloadImageBlock function is not defined, you will need to change Product.Config.prototype.updateData function. Copy the whole function to media.phtml and comment out the ajax requests starting with new Ajax.Updater

Other

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

Download

Download AJAX-ZOOM extension for Magento Download AJAX-ZOOM (not needed*)

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.

Changelog

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 (5)

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

Name (required):
Email (required):
Website:
Your comment (no html):
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.