Magento 1.9 – Fix ElevateZoom Not Working on Product Page

magento-1.9product-viewrwd-theme

So, just noticed that when I clicked on product thumbnails on the product view page of my magento, clicking the thumbnails don't do anything (instead it scrolls to top). This is the error I get in console:

Chrome: Uncaught TypeError: undefined is not a function 
Firefox: TypeError: image.elevateZoom is not a function

Line 1194 of rwd/default/js/app.js:

image.elevateZoom();

Any idea why this isn't working? As far as my theme goes, it's a very minimal theme that heavily falls back on the RWD Theme in magento 1.9.1. I'm using Easy Tabs on the product view page, but I tried disabling it to see if it worked… no dice.

Update:

What I've Tried:

  • I've disabled magento cache
  • Tried adding a custom js file with jQuery.noConflict(); in it via my local.xml immediately after (@AreDubya's Suggestion).
  • Removed custom js file from my local.xml after it didn't work.
  • Tried copying the same theme to another magento installation on the same host- elevateZoom works fine on that one… both these sites are pretty vanilla as far as extensions go.

My Local.xml

<layout version="0.1.0">
    <default>
        <reference name="right">
            <remove name="right.permanent.callout"/>
            <remove name="paypal.partner.right.logo"/>
            <block type="cms/block" name="right_info_block" before="-">
                <action method="setBlockId"><block_id>right_info_block</block_id></action>
            </block>
        </reference>
        <reference name="head">
            <action method="removeItem"><type>skin_js</type><name>js/slideshow.js</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/madisonisland.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name></action>
            <action method="removeItem"><type>link_rel</type><name>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</name></action>
            <!-- <action method="addItem"><type>skin_js</type><script>js/lib/hivarian.js</script></action> -->
        </reference>
        <reference name="footer">
            <remove name="footer_links"/>
            <remove name="footer_links2"/>
        </reference>
    </default>

    <!-- Mage_Catalog -->
    <catalog_product_view>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
        </reference>
        <reference name="product.info.additional">
            <block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
            <remove name="catalog.product.related" />
            <remove name="catalog.product.additional" />
        </reference>
    </catalog_product_view>

</layout>

Best Answer

Found the solution!

I originally tried @AreDubya's solution by making a custom .js file with jQuery.noConflict();

and making sure to include it in my local.xml with

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

Viewing Sources in Chrome's Developer Console showed my custom JS file being loaded immediately after jquery.elevateZoom-3.0.8.min.js

Looking through Chrome I stumbled upon a noconflict.js that magento includes after it loads protoype and jquery, I copied its syntax into my mynoconflict.js and it worked!

The Solution

// Avoid PrototypeJS conflicts, assign jQuery to $j instead of $
var $j = jQuery.noConflict();

Thanks for the help guys!

Related Topic