图像缩放在jquery中不起作用

时间:2015-08-04 08:58:16

标签: javascript jquery html css zoom

我正在尝试使用jquery JQZoom插件为我的图像添加缩放效果。

这就是我的HTML的样子:

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

我的Jquery:

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

我的问题是当我使用此代码时,图像缩放功能无法正常工作。它工作但不缩放。

这是一个包含现有代码的Fiddle

有谁可以告诉我这有什么问题?

谢谢。

0 个答案:

没有答案