我正在尝试使用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。
有谁可以告诉我这有什么问题?
谢谢。