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.

Improve this question
1
  • No, it isn't the right method, for now see last answer with my edit.
    – Simbus82
    Commented Sep 4, 2014 at 15:14

3 Answers 3

Reset to default
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.

Improve this answer
1
  • 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.
    Commented Jun 15, 2018 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.

Improve this answer
2
  • 1
    I have edited because is the right method.
    – Simbus82
    Commented Sep 4, 2014 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
    Commented Aug 11, 2015 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>
Improve this answer
4
  • thanks, but if remove that js file I can no longer select the thumbnail images for the main gallery area
    – Holly
    Commented Aug 5, 2014 at 15:21
  • It isn't a right method to disable this function.
    – Simbus82
    Commented Sep 4, 2014 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
    Commented Nov 6, 2014 at 22:43
  • This would throw an error because it wouldn't be able to find elevatezoom
    – Tisch
    Commented Nov 6, 2015 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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