How to remove zoom from product details page on 1.9 RWD theme

Question

How do you remove the zoom feature from Magento 1.9's rwd theme?

I can remove it with css

div.zoomContainer {
  display: none;
}

But I don't think this is the best method? It would be better to remove it from a template file or with xml.

I've tried editing the template/catalog/product/view/media.phtml but had no luck.

Answer 1

As mentioned in one of the other answers, the zoom feature starts in the createZoom function of the ProductMediaManager in /skin/frontend/rwd/default/js/app.js file.

So, another option is to override the individual createZoom function via JS later in the process.

For example, if you are inserting JS as a part of your own theme, then you can add the following to override the createZoom function in the ProductMediaManager object.

// ProductMediaManager is outside document.read scope
if (typeof ProductMediaManager !== 'undefined') {

  // Override image zoom in /skin/frontend/rwd/default/js/app.js
  // and prevent the zooming of images on hover
  ProductMediaManager.createZoom = function(image) { return; }

}

With this method, you don't have to copy the entire app.js file. However, you must make sure that your theme's JS is added after the parent theme's JS file. I find this to be a cleaner approach.

Answer 2

Create an override of file /skin/frontend/rwd/default/js/app.js (for example in /skin/frontend/rwd/mystyle/js/app.js)

comment the line (default line: 649):

//image.elevateZoom();

Refresh the Magento cache.

Answer 3

Open /frontend/rwd/default/layout/catalog.xml, In <catalog_product_view> section comment below line

<action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>