我正在使用此插件在我的网站上启用图片缩放:
http://www.elevateweb.co.uk/image-zoom/
我修改了代码,以便在您单击图像时仅显示放大镜(当您将鼠标悬停在图像上时,鼠标光标是放大镜,表示您可以单击以进行缩放)。代码如下所示:
$("#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');
});
这似乎工作正常 - 当我点击图像时我得到缩放功能,当我点击其他(随机)div时它会破坏缩放功能。但我无法弄清楚如何在点击图像时切换启用/禁用changeState函数?
谢谢!
答案 0 :(得分: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
是不够的,因为它仍然通过构建init
组件的整个elevateZoom
函数。因此仍然会创建一个覆盖元素zoomContainer
。
您还需要使用$('.zoomContainer').remove();
删除此元素。我还认为只需删除'.zoomContainer'
即可,您无需设置zoomEnabled: false
。
您可以在此处查看演示:jsfiddle.net/vF95M/