给onclick绑定一个jquery图片缩放效果

Question

我正在使用此插件在我的网站上启用图像缩放：

http://www.elevateweb.co.uk/image-zoom/

我修改了代码，使放大镜仅在您单击图像时出现（鼠标光标悬停在图像上时为放大镜，提示您可以单击放大）。代码如下所示：

    $("#mainimage").click(function() {
    $("#mainimage").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
        });
    });

此代码运行良好。但我想做的也是删除点击时的缩放效果。我尝试编写的任何代码都不起作用...有什么建议吗？

谢谢！

编辑：

我发现这个 github note 似乎暗示有一个 changeState 函数：

https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61

但是我在没有文档的情况下无法使用它...

现在我有这样的东西（只是为了测试它）：

    $("#mainimage").click(function() {
    $("#mainimage").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
    });
});



$('.productbioimage').click(function(){
    var ez =   $('#mainimage').data('elevateZoom');    
    ez.changeState('disable');
});

这似乎工作正常 - 当我单击图像时，我得到缩放功能，当我单击另一个（随机）div 时，它会破坏缩放功能。但是我不知道如何在单击图像时切换启用/禁用 changeState 功能？

谢谢！

Answer 1

没有简单的方法可以解决这个问题，除非插件提供停止或删除插件本身的功能和方法。您需要调查插件的作用，反转或取消绑定某些事件并删除插件添加到 DOM 的元素。

为了轻松完成这项工作，我建议您创建一个您将应用插件的元素的副本，而不是删除插件的效果。您需要有两张图片，一张应用了插件，然后只需在click() 上切换。

示例 html 结构：

<div id="image-wrapper">
    <div id="image1-container">
        <img src"/images/my-image.jpg" alt="my-image" />
    </div>
    <div id="image2-container">
        <!-- this element will contain the image with 'elevateZoom' applied -->
        <img id="mainimage" src"/images/my-image.jpg" alt="my-image" /> 
    </div>
</div>

jQuery:

//apply the 'elevateZoom' plugin to the image
$("#mainimage").elevateZoom({
    zoomType: "lens",
    lensShape: "round",
    lensSize: 300
});

//on page load hide the container which plugin is applied 
$('#image2-container').hide();    

$("#image-wrapper").click(function () {
   // hide matched element if shown, shows if element is hidden
   $('#image1-container, #image2-container').toggle();    
});

---

更新：

我看到有一个选项，我相信你可以这样称呼它：

$('#mainimage').elevateZoom({
    zoomEnabled: false
});

您可以像这样在click() 上启用和禁用它：

$('#mainimage').click(function () {
    /*class name 'zoomed' is just an indicator so we can determine if the image
     has been applied with elevateZoom */
    if($(this).hasClass('zoomed')){
        $(this).elevateZoom({
            zoomEnabled: false
        });
        $(this).removeClass('zoomed');            
    }else{
        $(this).elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 300
        });
        $(this).addClass('zoomed');          
    }
});

但是我注意到设置zoomEnabled: false 是不够的，因为它仍然通过构建elevateZoom 组件的整个init 函数。因此仍然会创建一个覆盖元素，即zoomContainer。

您还需要使用$('.zoomContainer').remove(); 删除此元素。我也认为只需删除'.zoomContainer'就足够了，您不需要设置zoomEnabled: false。

您可以在此处查看演示：jsfiddle.net/vF95M/