[英]Disable Zoom effect on Hover for Mobile devices in elevateZoom
当您在移动设备上检查elevateZoom时,尽管我们关闭了缩放选项,但当我们单击图像时页面滚动选项不起作用。 这是一个麻烦。
我们想禁用移动设备或响应式尺寸的缩放选项。
是否有任何值或变量可以用于仅完全禁用移动设备的缩放效果?
任何人都可以建议如何做到这一点,或者是否有人过去为他们的主题做过?
ElevateZoom API 你可以得到:
var ezApi = $('#primaryImage').data('elevateZoom');
为了启用/禁用缩放,您应该使用“changeState”方法
ezApi.changeState('enable'); // or disable
要检测更改媒体查询断点,您可以使用 matchMedia
var mq = window.matchMedia('(min-width: 768px)'); mq.addListener((b) => { if (b.matches) { // do something for screens > 768px, for example turn on zoom ezApi.changeState('enable'); } else { // do something for screens < 768px, for example turn off zoom ezApi.changeState('disable'); } });
尝试
var image = $('#primaryImage');
var zoomConfig = {};
var zoomActive = false;
image.on('click', function(){
zoomActive = !zoomActive;
if(zoomActive)
{
image.elevateZoom(zoomConfig);//initialise zoom
}
else
{
$.removeData(image, 'elevateZoom');//remove zoom instance from image
$('.zoomContainer').remove();// remove zoom container from DOM
}
});
其他选项
$('#primaryImage').click(function(){
if($(window).width()>768){
$(this).elevateZoom({
zoomWindowPosition:1,
zoomWindowOffetx: 5,
zoomWindowWidth:$(this).width(),
zoomWindowHeight:$(this).height(),
});
}
else{
$.removeData($(this), 'elevateZoom');//remove zoom instance from image
$('.zoomContainer').remove(); // remove zoom container from DOM
return false;
}
});
尝试在jquery.elevatezoom.js或jquery.elevateZoom 最小版本(我的版本:3.0.8)中禁用/评论触摸事件:
//touch events
/* self.$elem.bind('touchmove', function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('touchmove', function(e){
if(self.options.zoomType == "inner") {
self.showHideWindow("show");
}
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('touchend', function(e){
self.showHideWindow("hide");
if(self.options.showLens) {self.showHideLens("hide");}
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
});
self.$elem.bind('touchend', function(e){
self.showHideWindow("hide");
if(self.options.showLens) {self.showHideLens("hide");}
if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
});
if(self.options.showLens) {
self.zoomLens.bind('touchmove', function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
}); */
我从这里找到并且最简单的最佳答案: https ://github.com/elevateweb/elevatezoom/issues/102#issuecomment-255942134
@media(max-width: $tablet-max) { /* 放大的图片 */ .product__img { pointer-events: none; } }
在 js 插件中添加此选项
touchEnabled: false,
使用此选项,桌面 PC 图像将被缩放,而在移动设备中,缩放将被禁用。
或者您可以使用媒体查询隐藏.zoomContainer ?
例如:
@media screen and (max-width: 425px) {
.zoomContainer {
display: none;
}
}
我遇到了同样的问题,所以我编辑了我的 js 文件并在其上添加了 if,else 条件。 此条件将类似于 CSS 媒体查询。
//JQUERY CODE
if (window.matchMedia('(min-width: 500px)').matches) {
jQuery.fn.elevateZoom.options = {
zoomEnabled: true
}
}else{
jQuery.fn.elevateZoom.options = {
zoomEnabled: false
}
}
如果您尝试了所有方法但没有任何效果,请尝试使用 CSS 封面(它对我来说非常适合)
在您的 HTML 中:
<figure class="product-main-image">
<div class="product-zoom-cover"> </div>
<img id="product-zoom" src="............">
</figure>
在您的 CSS 中:
.product-zoom-cover{
display: none;
}
@media screen and (max-width: 768px) {
.product-main-image{
position: relative;
}
.product-zoom-cover{
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 48;
}
}
所有人的成功和良好的代码!
对于那些仍然来自搜索引擎的人来说,管理不同大小的每个选项(如在移动设备上启用/禁用)的最佳方法是使用插件的文档! 开始了:
首先,您必须管理 elevatezoom 的全局选项:
jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 400,
borderSize:1,
responsive: true
});
然后添加以下代码:
respond: [
{
range: '320-991',
enabled: false,
showLens: false
}
]
因此,整个代码将是:
jQuery('.mainproimg').ezPlus({
easing: true,
lensFadeIn: 200,
lensFadeOut: 200,
zoomWindowFadeIn: 200,
zoomWindowFadeOut: 200,
zoomWindowPosition: 11,
zoomWindowWidth: 400,
zoomWindowHeight: 402,
zoomWindowOffsetY: -8,
borderSize:1,
responsive: true,
enabled: true,
showLens: true,
respond: [
{
range: '320-991',
enabled: false,
showLens: false
}
]
});
在这种情况下,elevatezoom 将在宽度为 320 像素到 991 像素的设备上禁用。 当然,您可以为每个断点添加更多范围并管理插件选项。
从元素中取消绑定 touchmove
$('#img-product-zoom').unbind('touchmove');
然后隐藏缩放区域的容器
$('.ZoomContainer').hide();
使用此代码检测手机
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
///here put your code
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.