我正在开发一个具有缩放功能的图像库,但是当我更改图像时,缩放不会显示更改。这是我第一次使用 jquery 插件,所以我可能只需要在正确的方向上轻推一下。
问题是当我尝试使用 .swap() 时,我得到了
类型错误:$easyzoom.swap 不是函数
API 引用中有这个 .swap(standardSrc,zoomSrc) 轻松切换标准和缩放图像源。
我正在使用 EasyZoom http://i-like-robots.github.io/EasyZoom/
代码非常简单,缩放适用于初始图像,但是当图像交换时,缩放仍然使用原始图像。 .swap() 应该处理它,但由于某些(可能非常简单)的原因我无法让它工作。
HTML:
<div id="mview">
<div class="easyzoom easyzoom--overlay">
<a href="/media/test/IMG_20130403_084209_183.jpg" id="zoomsrc">
<img src="/media/test/sm_IMG_20130403_084209_183.jpg" width="349" id="zoomview" />
</a>
</div>
<!------>
<div id="imgbar">
<img src="/media/test/tn_IMG_20130403_084209_183.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091502_782.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091511_640.jpg" width="60" /></div>
</div>
Javascript
$(document).ready(function() {
var $easyzoom = $('.easyzoom').easyZoom();
$("#imgbar img").click(function(e) {
var bigImg=this.src.replace("tn_","sm_");
var bigImgSrc=this.src.replace("tn_","");
$("#zoomview").attr("src",bigImg);
$("#zoomsrc").attr("href",bigImgSrc);
console.log($easyzoom.data('easyzoom'));
// $('.easyzoom').swap(bigImg,bigImgSrc); //tried this too
$easyzoom.swap(bigImg,bigImgSrc);
});
});
感谢您花时间查看此内容
中号
最佳答案
您没有访问 EasyZoom API。每个实例都通过 jQuery 的内部存储保存到目标元素,并且可以像这样访问:$easyzoomElement.data("easyZoom")
我已在此处更新了您的示例代码 ( http://jsfiddle.net/spidre409/6Z89g/ ): http://jsfiddle.net/6Z89g/2/
关于javascript - easyzoom jquery 插件出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23663305/