[英]elevateZoom - jQuery image zoom plugin
I would like to know how to enable zoom on my website when displayed on mobile (especially in Chrome browser).我想知道在移动设备上显示时如何在我的网站上启用缩放(尤其是在 Chrome 浏览器中)。
I am using elevate Zoom - a jQuery image zoom plugin - it is working on desktop but the mobile view does not work.我正在使用 elevate Zoom - 一个 jQuery 图像缩放插件 - 它在桌面上工作,但移动视图不起作用。
Plugin used : https://www.elevateweb.co.uk/image-zoom/examples/#mousewheel使用的插件: https : //www.elevateweb.co.uk/image-zoom/examples/#mousewheel
Site (Desktop is working): https://www.shadowboxmilitarygear.com/Vietnam-T-shirt-for-the-back网站(桌面正在运行): https : //www.shadowboxmilitarygear.com/Vietnam-T-shirt-for-the-back
I need the plugin to working with mobile as well.我也需要该插件才能与移动设备配合使用。
Do you have any ideas of what I can do to enable the zoom on mobile chrome?您对我可以做些什么来启用移动 chrome 的缩放有任何想法吗?
HTML HTML
<select id="select">
<option value="1">Front</option>
<option value="2">Back</option>
<option value="3">Scenery</option>
<option value="4">Side</option>
</select>
JAVASCRIPT爪哇脚本
$("#zoom_09").elevateZoom({
gallery : "gallery_09",
galleryActiveClass: "active"
});
$("#select").change(function(e){
var currentValue = $("#select").val();
if(currentValue == 1){
smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png';
largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg';
}
if(currentValue == 2){
smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png';
largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg';
}
if(currentValue == 3){
smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png';
largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg';
}
if(currentValue == 4){
smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png';
largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg';
}
// Example of using Active Gallery
$('#gallery_09 a').removeClass('active').eq(currentValue-1).addClass('active');
var ez = $('#zoom_09').data('elevateZoom');
ez.swaptheimage(smallImage, largeImage);
});
very helpful很有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.