elevateZoom - jQuery 图像缩放插件答案

【问题标题】：elevateZoom - jQuery image zoom pluginelevateZoom - jQuery 图像缩放插件
【发布时间】：2019-09-13 06:16:05
【问题描述】：

我想知道如何在我的网站在移动设备上显示时启用缩放（尤其是在 Chrome 浏览器中）。

我正在使用提升缩放 - 一个 jQuery 图像缩放插件 - 它在桌面上工作，但移动视图不起作用。

使用的插件：https://www.elevateweb.co.uk/image-zoom/examples/#mousewheel

网站（桌面正在运行）：https://www.shadowboxmilitarygear.com/Vietnam-T-shirt-for-the-back

我也需要该插件才能使用移动设备。

您对我可以做些什么来启用移动 chrome 上的缩放有任何想法吗？

【问题讨论】：

我快速浏览了 Shadowbox 网站，发现移动设备严重损坏 - 我认为移动设备缩放是您遇到的最小问题。这是一个自定义主题，你能改变这些属性吗？这个 CSS 使移动视图中的布局中断.productpage .product-left { padding-right: 24px; width: 50.5%; } .productpage .product-right { padding: 0 24px 0 0; width: 49.5%; }
抱歉，@Daniel 问题已解决。问题是 if($(window).width() > 768) { i 改变宽度。感谢您对我的回复。

标签： javascript php jquery plugins opencart

【解决方案1】：

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); 

    });

很有帮助

【讨论】：