JQuery Mobile Pinch Phóng to Hình ảnh Chỉ

Question

Tôi có một ứng dụng JQM đang hoạt động mà tôi muốn hiển thị một số hình ảnh. Hình ảnh hiện có trong khung nội tuyến của riêng chúng để chúng có thể được cuộn riêng khỏi ứng dụng.

Tôi muốn chỉ có thể thu nhỏ các hình ảnh trong khung nội tuyến.

Tôi nhận ra nếu tôi điều chỉnh đoạn mã sau mà tôi có thể bật thu phóng pinch nhưng điều này đã bật tính năng này cho toàn bộ ứng dụng.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

Bằng cách xóa bỏ tỷ lệ thu phóng pinch quy mô tối đa nhưng cho mọi thứ.

Có cách nào để bật thu phóng pinch chỉ cho hình ảnh không? Làm cách nào để thêm thẻ khung nhìn mới vào khung nội tuyến, điều đó có hiệu quả nếu điều đó thậm chí có thể thực hiện được không?

CẬP NHẬT

• Tiêm HTML vào iframe. Đã thêm thẻ meta, điều này không giúp ích gì.

• Đã cố gắng .extend ($. Mobile.zoom, {locked: false, enabled: true}); trên khung nội tuyến, điều này không làm gì cả.

Answer 1

Hóa ra cách tốt nhất để làm điều này là sử dụng plugin ChildBrowser. Điều này trên IOS và Android hoạt động hoàn hảo cho hình ảnh.

IOS Childbrowser:

https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser 

Android ChildBrowser:

https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser 

Sau đó, một khi bạn đã thực hiện tất cả các thiết lập, bạn có thể mở các tập tin địa phương của URL hoặc như thế này:

window.plugins.childBrowser.onLocationChange(location); 

Đỗ lưu ý rằng trong một thiết lập nền tảng chéo hoàn toàn giữa IOS và Android, cả hai đều cần versio khác nhau ns của plugin. IOS yêu cầu khởi động ChildBrowser trong onDeviceReady, Android thì không.

Answer 2

Là một (hack) khắc phục, có lẽ bạn có thể phát hiện khi người dùng đang thực hiện một nhúm gesture, sau đó phóng to hình ảnh bằng cách sử dụng CSS transform.

Answer 3

bạn có thể làm điều này trên hình ảnh:

var image=document.getElementById('imageId'); 

image.addEventListener('gesturechange',function(e){ 

    if(e.scale>1){ 
     //zoom in 
     //increase the size of image according to the e.scale 
    } 

    else if(e.scale<1){ 
     //zoom out 
     //decrease the size of image according to the e.scale 
    } 
}); 

Answer 4

có sử dụng một số loại phụ tùng để zoom in/out tác phẩm ảnh inplace? ví dụ: http://0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom