6

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>
  • Please check whether you can reproduce the error in default theme. magento.stackexchange.com/a/429/217 – Fabian Blechschmidt Feb 17 '15 at 20:16
  • Switched back to rwd package with the default theme. Still has the same problem. – Morphiuz Feb 17 '15 at 20:20
  • Please read the whole post and make sure you can reproduce this error in a default installation. If this is the case we can help you. If this is not the case it is your personal problem we can't debug for you. – Fabian Blechschmidt Feb 17 '15 at 20:21
  • Tried it on a default installation, works fine. Copied my theme (front and back) to the default installation and it still works fine. Is there somewhere I'm not looking? – Morphiuz Feb 18 '15 at 18:50
  • I'm still unable to get elevateZoom to execute properly. Should I reask the question in a new post? – Morphiuz Feb 19 '15 at 20:17
10

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!

| improve this answer | |
  • You can mark your own answer as solution! – Fabian Blechschmidt Feb 20 '15 at 10:26
  • I was having the same problem. Thanks for the question and answer. :) – Mukesh Chapagain Aug 2 '15 at 16:20
1

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.

| improve this answer | |
  • still new to magento, but I assume we'd want to do that in the local.xml or a custom catalog.xml? Could you perhaps provide syntax that would be relative to the product view page? – Morphiuz Feb 17 '15 at 20:20
  • Personally, since you aren't adding any code I would just make the edit in the catalog.xml you are referencing above. Take <action method="addItem"><type>skin_js</type> <script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action> and move it to be at the bottom of your <reference name='head'> section. (sorry for the formatting!) – AreDubya Feb 17 '15 at 20:44
  • Also, you could try the noConflict quickly by making a js file with just the noConflict call, then adding it after the elevateZoom import. If you take a look at the jQuery link above, there are different options depending on what the conflict might be - with Prototype, if there are two versions of jQuery loaded, etc. – AreDubya Feb 17 '15 at 20:53
  • @Morphiuz, yes, make that change in the local.xml file. It is very bad practice (even for just one change) to make any changes in catalog.xml. – Joseph at SwiftOtter Feb 17 '15 at 21:06
  • @AreDubya, I tried making that change in local.xml and making sure to call it last. I also tried to a custom js file with jQuery.noConflict(); (Updated answer with this information.) Still no dice. :( Thanks for your help so far – Morphiuz Feb 17 '15 at 23:46
1

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
  });
});
});
| improve this answer | |

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.