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

jquerymagento-enterprisezoom

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();

Best Answer

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).

Related Solutions

Magento 1.9 jQuery – TypeError: jQuery(…).owlCarousel is Not a Function

Please remove "owl.carousel.js" ans also add jQuery.noConflict(); before "jQuery(document).ready(function() {" .

Please check another jquery library is not included in head except "jquery-2.1.1.js".

Magento 1.9 – Display Drop Down Values on Mouse-Over

You should convert <select><option>... to <ul><li>... list, and apply jQuery scipt as shown here in demo : http://html-tuts.com/jquery-dropdown-menu/

Full Solution:

Change this phtml

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

WITH :

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></label>

    <ul id="select-language" title="<?php echo $this->__('Your Language') ?>" class="dropDownMenu">
        <li><a href=""><?php echo $this->__('Your Language') ?></a>
        <ul>
            <?php foreach ($this->getStores() as $_lang): ?>
                <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' class="selected"' : '' ?>
                <li <?php echo $_selected ?>>
                <a href="<?php echo $_lang->getCurrentUrl() ?>"><?php echo $this->escapeHtml($_lang->getName()) ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
        </li>
    </ul>

</div>
<?php endif; ?>

Now Apply Below jQuery Code:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#select-language li').hover(function() {
        jQuery(this).children('ul').stop(true, false, true).fadeToggle(300);
    });
});
</script>

Add some CSS (change it according to your requirement) :

<style type="text/css">
.menuBackground {
    background: brown;
    text-align: center;
}
.dropDownMenu a {
    color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropDownMenu li {
    position: relative;
}
.dropDownMenu a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}
.dropDownMenu a:hover {
    background: #000;
}
.dropDownMenu > li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
    margin-left: 0;
}
.dropDownMenu ul {
    box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
    text-align: left;
    display: none;
    background: green;
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    z-index: 999999;
}
</style>

Note: Remove other jQuery or CSS binded with select-language element

Best Answer

Related Solutions

Magento 1.9 jQuery – TypeError: jQuery(…).owlCarousel is Not a Function

Magento 1.9 – Display Drop Down Values on Mouse-Over

Related Topic