9

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.

  • No, it isn't the right method, for now see last answer with my edit. – Simbus82 Sep 4 '14 at 15:14
10

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.

  • Worked for me, but keep in mind that the overwrite can't be loaded too late. I had wrapped it in a jQuery document ready observer, and it was too late for the overwrite to do anything. Instead I had to execute the overwrite right as my custom JS file was loaded, so I just placed it outside of the jQuery document ready observer. – Louis B. Jun 15 '18 at 13:00
15

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.

  • 1
    I have edited because is the right method. – Simbus82 Sep 4 '14 at 15:13
  • 2
    Slightly better solution may be to just add a return; statement at the very beginning of this createZoom function which this image.elevateZoom(); call resides in. That way none of the client side JavaScript even has to execute in the first place. (still follow the practice of overriding this file in your local theme first) – Darren Felton Aug 11 '15 at 19:55
-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>
  • thanks, but if remove that js file I can no longer select the thumbnail images for the main gallery area – Holly Aug 5 '14 at 15:21
  • It isn't a right method to disable this function. – Simbus82 Sep 4 '14 at 15:15
  • 3
    You should never be modifying the files in /app/design/frontend/rwd/default/layout/ OR any of the files in /app/design/frontend/base/default/layout/. Doing so does not follow upgrade friendly practices. Layout updates should always be done in "local.xml" within your theme. There isn't any layout XML instructions, that cannot be overridden, modified, removed, etc., in local.xml. – Darren Felton Nov 6 '14 at 22:43
  • This would throw an error because it wouldn't be able to find elevatezoom – Tisch Nov 6 '15 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.