Question

我正在使用具有缩放功能的图库，但是当我更改图像时，缩放并未获得更改。这是我第一次使用jquery插件，所以我可能只需要朝着正确的方向轻推。

问题是，当我尝试使用.swap（）时，我正在使用

TypeError：$ easyzoom.swap不是函数

API ref有这个 .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);
       });
    });

感谢您抽出时间看看

中号

Answer 1

您没有访问EasyZoom API。每个实例都通过jQuery的内部存储保存到目标元素，并且可以这样访问：$easyzoomElement.data("easyZoom")

我已在此处更新了您的示例代码（http://jsfiddle.net/spidre409/6Z89g/）：http://jsfiddle.net/6Z89g/2/

使用easyzoom jquery插件时出现问题

1 个答案: