将jquery图像缩放效果绑定到onclick [英] Bind a jquery image zoom effect to onclick
问题描述
我使用此插件在我的网站上启用图片缩放：
http://www.elevateweb.co.uk/image-zoom/
我修改了代码因此放大镜只会在您点击图片时出现（当您将鼠标悬停在图片上时，鼠标光标是一个放大镜，建议您点击放大）。代码如下所示：
$（＃mainimage （#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函数。
谢谢！
除非插件提供了停止或删除插件本身的功能和方法，否则没有简单的方法。您需要调查插件的功能，以反转或取消绑定某些事件，并删除插件添加到DOM中的元素。
要轻松完成此操作，而不是删除插件的效果，我建议你创建一个重复的元素，你将应用该插件。您需要有两个图片，一个使用插件，只需在 click（）上切换即可。
样例html结构：
< div id =image-wrapper>
< div id =image1-container>
< img src/images/my-image.jpgalt =my-image/>
< / div>
< div id =image2-container>
<！ - 此元素将包含应用了elevateZoom的图像 - >
< img id =mainimagesrc/images/my-image.jpgalt =my-image/>
< / div>
< / div>
jQuery：
code> //将'elevateZoom'插件应用到图片
$（＃mainimage）。elevateZoom（{
zoomType：lens，
lensShape：round ，
lensSize：300
}）;
//页面加载隐藏应用该插件的容器
$（'＃image2-container'）。
$（＃image-wrapper）click（function（）{
//隐藏匹配元素（如果显示），显示如果元素隐藏
$（'＃image1 -container，＃image2-container'）。toggle（）;
}）;
更新：
我看到有一个选项，我相信你可以这样调用：
$ （'#mainimage'）。elevateZoom（{
zoomEnabled：false
}）;
您可以在上启用和禁用它$ c>像这样：
$（'＃mainimage'类名'zoomed'只是一个指标，所以我们可以确定图像
是否已应用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 /
I'm using this plugin to enable an image zoom on my site:
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:
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?
Thanks!
解决方案 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.
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 switch on them on click().
Sample html structure:
<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();
});
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:
$('#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: false is not enough because it still passes through the whole init function which builds the elevateZoom components. And thus still creates an overlay element which is the 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.
You can see the demo here: jsfiddle.net/vF95M/
这篇关于将jquery图像缩放效果绑定到onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
