将jquery图像缩放效果绑定到onclick

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

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

我修改了代码,以便在您单击图像时仅显示放大镜(当您将鼠标hover在图像上时,鼠标光标是放大镜,表示您可以单击以进行缩放)。 代码如下所示:

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

这段代码工作正常。 但我想做的还是删除点击缩放效果。 我尝试写的任何代码都不起作用……有什么建议吗?

谢谢!

编辑:

我发现这个github注意似乎表明有一个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'); }); 

这似乎工作正常 – 当我点击图像我得到缩放function,当我点击这个其他(随机)div它会破坏缩放function。 但我无法弄清楚如何在点击图像时切换启用/禁用changeState函数?

谢谢!

除非插件提供停止或删除插件本身的function和方法,否则没有简单的方法。 您需要调查插件的作用,反转或取消绑定某些事件,并删除插件添加到DOM的元素。

为了轻松完成这项工作,我建议您创建一个副本,而不是删除插件的效果。 你需要有两个图像,一个插入应用插件,只需在click()上打开它们。

示例html结构:

 
my-image
my-image

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函数。 因此仍然创建一个overlay元素,它是zoomContainer

您还需要使用$('.zoomContainer').remove();删除此元素$('.zoomContainer').remove(); 。 我还认为只需删除'.zoomContainer' ,您无需设置zoomEnabled: false

你可以在这里看到演示: jsfiddle.net/vF95M/