jQuery 绑定一个jquery图片缩放效果到onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21490554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bind a jquery image zoom effect to onclick
提问by tomcritchlow
I'm using this plugin to enable an image zoom on my site:
我正在使用此插件在我的网站上启用图像缩放：
http://www.elevateweb.co.uk/image-zoom/
http://www.elevateweb.co.uk/image-zoom/
I modified the code so that the magnifying glass only appears when you click the image (the mouse cursor is a magnifying glass when you hover over the image to suggest that you can click to zoom). The code looks like the following:
我修改了代码，以便放大镜仅在您单击图像时出现（当您将鼠标悬停在图像上时，鼠标光标是一个放大镜，建议您单击以进行缩放）。代码如下所示：
$("#mainimage").click(function() {
$("#mainimage").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 300
});
});
This code works fine. But what I'd like to do is also remove the zoom effect on click. Any code I try and write doesn't work... Any suggestions?
这段代码工作正常。但我想要做的也是删除点击时的缩放效果。我尝试编写的任何代码都不起作用......有什么建议吗？
Thanks!
谢谢！
EDIT:
编辑：
I found this github note that seems to suggest there's a changeState function:
我发现这个 github 注释似乎表明有一个 changeState 函数：
https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61
https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61
But I'm having trouble using it without documentation...
但是我在没有文档的情况下无法使用它...
Right now I have something like this (just to test it):
现在我有这样的东西（只是为了测试它）：
$("#mainimage").click(function() {
$("#mainimage").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 300
});
});
$('.productbioimage').click(function(){
var ez = $('#mainimage').data('elevateZoom');
ez.changeState('disable');
});
This seems to work fine - when I click the image I get the zoom function, when I click this other (random) div it destroys the zoom function. But I can't figure out how to toggle the enable/disable changeState function on click of the image?
这似乎工作正常 - 当我单击图像时，我获得了缩放功能，当我单击另一个（随机）div 时，它会破坏缩放功能。但是我不知道如何在单击图像时切换启用/禁用 changeState 功能？
Thanks!
谢谢！
采纳答案by Mark S
There is no easy way around this, unless the plugin offers that functionality and method to stop or remove the plugin itself. You'll need to investigate what the plugin does, to reverse or unbind certain events and remove the elements that the plugin adds to the DOM.
没有简单的方法可以解决这个问题，除非插件提供了停止或删除插件本身的功能和方法。您需要调查插件的作用，反转或取消绑定某些事件并删除插件添加到 DOM 的元素。
To get this done easily, instead of removing the effects of the plugin, I would suggest you create a duplicate of the element in which you'll applied the plugin. You need to have two images, one with the plugin applied to it and just simply switchon them on click().
为了轻松完成此操作，我建议您不要删除插件的效果，而是创建一个将应用该插件的元素的副本。你需要有两张图片，一张应用了插件，只需简单地打开它们click()。
Sample html structure:
示例 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:
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();
});
Update:
更新：
I see there is a option for this and I believe you can call it this way:
我看到有一个选项，我相信你可以这样称呼它：
$('#mainimage').elevateZoom({
zoomEnabled: false
});
And you can enable and disable it on click()like this:
您可以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');
}
});
However I noticed that setting zoomEnabled: falseis not enough because it still passes through the whole initfunction which builds the elevateZoomcomponents. And thus still creates an overlay element which is the zoomContainer.
但是我注意到设置zoomEnabled: false是不够的，因为它仍然通过init构建elevateZoom组件的整个函数。因此仍然创建了一个覆盖元素，即zoomContainer.
You need to remove this element as well with $('.zoomContainer').remove();. I also think that just removing '.zoomContainer'is enough and you don't need to set zoomEnabled: false.
您还需要使用$('.zoomContainer').remove();. 我也认为只需删除'.zoomContainer'就足够了，您不需要设置zoomEnabled: false.
You can see the demo here: jsfiddle.net/vF95M/
你可以在这里看到演示：jsfiddle.net/vF95M/
