Using Magento 1.9.1 CE, ElevateZoom doesn't work on product page (Uncaught TypeError: undefined is not a function)

Question

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>

Answer 1

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!

Answer 2

Assuming everything is in place correctly in the view file, I would try loading jquery.elevateZoom-3.0.8.min.js last if it isn't already. Depending on what other js libraries your theme uses, you may want to look into jQuery.noConflict() as well.

Import to bottom:

<reference name="head">
    <action method="addJs"><script>varien/product.js</script></action>
    <action method="addJs"><script>varien/configurable.js</script></action>
    <action method="addItem"><type>skin_js</type>
    ...
    ... other imports here
    ...
    <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
</reference>

A note on jQuery.noConflict

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias.

Answer 3

For anyone who already has noConflict setup and is still running in to problems I finally found this solution on a ticket raised on Github

// First call elevateZoom

$j(document).ready(function() {     
  $j('.product-image-thumbs').attr('id', 'zoomGallery');

  //initiate the plugin and pass the id of the div containing gallery images 

  $j("#image-main").elevateZoom({gallery:'zoomGallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

 //pass the images to Fancybox 

 $j("#image-main").bind("click", function(e) { 
    var ez = $j('#image-main').data('elevateZoom');    
    $j.fancybox(ez.getGalleryList()); 
    return false; 
 }); 

// after click you need to remove the current zoom 

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
    $j('.zoomContainer').remove();
    $j('#image-main').removeData('elevateZoom');

// and then call it again

$j('#image-main').elevateZoom({
    gallery: 'more-vies',
    lensSize: 200,
    cursor: 'pointer',
    galleryActiveClass: 'active',
    imageCrossfade: true,
    scrollZoom : true,
    responsive: true
  });
});
});