javascript - elevateZoom - jQuery 图像缩放插件
问题描述
我想知道如何在移动设备上显示我的网站(尤其是在 Chrome 浏览器中)时启用缩放功能。
我正在使用提升缩放 - 一个 jQuery 图像缩放插件 - 它在桌面上工作,但移动视图不起作用。
使用的插件:https ://www.elevateweb.co.uk/image-zoom/examples/#mousewheel
网站(桌面正在运行):https ://www.shadowboxmilitarygear.com/Vietnam-T-shirt-for-the-back
我也需要该插件才能与移动设备一起使用。
您对我可以做些什么来启用移动 chrome 上的缩放有任何想法吗?
解决方案
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);
});
非常有帮助
推荐阅读
- excel - 无法导航到下一行
- visual-studio-code - Chrome 中的 VS Code 调试 - 无法访问此站点错误
- python - 随着变量的增长,每设定数量执行一次除法 - python
- .net-core - WebRTC 和 Asp.NetCore
- android - 您如何在 firestore android 的事务中遍历子集合中的文档?
- php - 使用 GET 时未在 AFNetworking 中发布参数
- firefox - 在 Windows 10 中构建 NSS 3.35 以获取 Certutil。错误,C 编译器无法创建可执行文件
- react-native - React Native ToDo App 无法正确显示输入的文本
- swift4 - 关闭 SFSafariViewController 后页面表无法正确显示
- r - 合并不同行的日期和时间