elevateZoom - jQuery 圖片縮放插件

Question

我想知道在移動設備上顯示時如何在我的網站上啟用縮放（尤其是在 Chrome 瀏覽器中）。

我正在使用 elevate Zoom - 一個 jQuery 圖像縮放插件 - 它在桌面上工作，但移動視圖不起作用。

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

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

我也需要該插件才能與移動設備配合使用。

您對我可以做些什么來啟用移動 chrome 的縮放有任何想法嗎？

Answer 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>

爪哇腳本

$("#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); 

    });

很有幫助