0

I am trying to add an image zoom to our Magento EE 1.14.2.1 which apparently was removed by a prior developer. So I found a script called "jqzoom" http://www.myjqueryplugins.com/jquery-plugin/jqzoom which I want to use. I of course have added a call to Jquery in the head.phtml file and also added the call to the needed jqzoom js and css files in the media.phtml file. However now when I view a product detail page I see in the console the below error.

Uncaught TypeError: $(...).jqzoom is not a function

Now on the top of my media.phtml page I have

<!-- Load image zoom code -->
 <script type="text/javascript" src="<?php echo Mage::getUrl()?>skin/frontend/bronson/default/js/jquery.jqzoom-core.js"></script>  

 <link rel="stylesheet" type="text/css" href="<?php echo Mage::getUrl()?>skin/frontend/bronson/default/css/jquery.jqzoom.css">
 <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($) 
        {
           /* simple call */
            $('.cloud-zoom').jqzoom();


            /* more complex call*/
            /*var options = {  
              zoomType: 'standard',  
              lens:true,  
              preloadImages: true,  
              alwaysOn:false,  
              zoomWidth: 300,  
              zoomHeight: 250,  
              xOffset:90,  
              yOffset:30,  
              position:'left'  
              //...MORE OPTIONS  
           };

           $('.cloud-zoom').jqzoom(options); */

        });

  </script>

At the top of the jquery.jqzoom-core.js file I have

     jQuery.noConflict();
     (function ($) {

So I am not sure why the site still does not see jqzoom as a function and how to fix?

                        *********

I updated my media.phtml to the below and no my issue is I do not see any errors in the console but but the image zoom also does not work.

jQuery.noConflict();

then I changed the /* simple call */ to

jQuery('cloud-zoom').jqzoom();
  • what is you magento version – Mujahidh Feb 1 '16 at 14:03
  • I mentioned at the top of my post my Magento version is Magento EE 1.14.2.1 :) – Jayreis Feb 1 '16 at 14:05
  • i also had the same issue like this this.i short it out.You can check this link which i asked on the forum and my answer too. magento.stackexchange.com/questions/97200/… – Mujahidh Feb 1 '16 at 14:08
  • update if this approach help you :) – Mujahidh Feb 1 '16 at 14:10
1

Don't use the dollar, you will have issues since it's prototype's baby. Where you call $(...).jqzoom();, replace it with jQuery(...).jqzoom(); and this should fix your issue (keep the noConflict).

  • thanks Mayers. I did that and now I do not get any errors however the image zoom still is not working. – Jayreis Feb 1 '16 at 15:10
  • At this point, this is very vague. Do you have a link we can see this on? – Mayers Feb 1 '16 at 15:32
  • You can view the page here bit.ly/1KSxpSp I actually just changed the jquery file to be a different zoom (thinking maybe the other one had issues) so you will see calls to elevatezoom instead of jqzoom but the code layout is the same. – Jayreis Feb 1 '16 at 15:51

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.