Image zooming is not working in jquery

I am trying to add zoom effect to my images using jquery JQZoom plugin.

This is how my HTML looks like:

<div class="pb-left-column">
  <!-- product img-->        
  <div id="image-block" class="clearfix is_caroucel">
    <span id="view_full_size">
      <a class="jqzoom" title="" rel="gal1" href="img/products/1/1-tm_thickbox_default.jpg">
        <img src="img/products/1/1-tm_large_default.jpg" title="" alt="">
      </a>
    </span>
  </div> <!-- end image-block -->

  <!-- thumbnails -->
  <div id="views_block" class="clearfix">  
    <a id="view_scroll_left" class="" title="Other views" href="javascript:{}">Previous</a>
    <div id="thumbs_list">
      <ul id="thumbs_list_frame">
        <li id="thumbnail_1">
          <a rel="{ gallery: 'gal1', 
                    smallimage: 'img/products/1/1-tm_large_default.jpg',
                    largeimage: 'img/products/1/1-tm_thickbox_default.jpg'}"
             title="">
            <img class="img-responsive" id="thumb_1" src="img/products/1/1-tm_cart_default.jpg" alt="" title="" height="80" width="80">
          </a>
        </li>  
        .....
        .....
        .....
      </ul>
    </div> <!-- end thumbs_list -->
    <a id="view_scroll_right" title="Other views" href="javascript:{}">
      Next
    </a>
  </div> <!-- end views-block -->     
  <!-- end thumbnails -->                                                          
</div>

MY Jquery:

$(document).ready(function() {
  $('.jqzoom').jqzoom({
    zoomType: 'innerzoom', 
    zoomWidth: 458, 
    zoomHeight: 458, 
    xOffset: 21, 
    yOffset: 0,
    title: false
  });
});

My problem is when I using this code, image zoom is not working correctly. Its working but not zooming.

This is a Fiddle with existing code.

Can anybody tell me what is the wrong with this?

Thank you.