Question

我使用过锤子和运输工具，但仍然可以使它正常工作。

详细说明：它缩放，但缩放所有图像，不仅是可见图像，而且它不可拖动。

我试过几个插件（比如pep.js）但是，由于我无法直接到达图像，我无法将它们应用到它上面。（ui-overlay掩盖了它们）。这是我的代码。我哪里错了？我使用了PhoneGap和JqueryMobile

以下是代码：

var currentPage = $.mobile.activePage;
var options = {
  enableMouseWheel        : false , 
  enableKeyboard          : false, 
  captionAndToolbarOpacity: 1,
  backButtonHideEnabled   : false,   //do not modify - causes android crash
  allowUserZoom           : true,
  getImageMetaData        : function(el){
                        return{
                            id  : el.getAttribute('id')
                        }
                    }
  },
  photoSwipeInstance = $('#lstImages a',e.target).photoSwipe(options,currentPage.attr('id'));
  photoSwipeInstance.addEventHandler(window.Code.PhotoSwipe.EventTypes.onDisplayImage,function(e){

      //OVERRIDES THE PHISICAL ANDROID BACK BUTTON BEHAVIOUR AND STAY IN PAGE
       document.addEventListener('backbutton',function(e){
        e.preventDefault();
             window.Code.PhotoSwipe.activeInstances[0].instance.hide(); 
             window.location.hash = $.mobile.urlHistory.getActive();
    },false)

    var currentImage = photoSwipeInstance.getCurrentImage();
    var id = currentImage.metaData.id;
    var $img = $('.ps-carousel-item-'+id+' img');
    var $wrap = $('.ps-carousel-'+id);

    $('.ps-uilayer').hammer({prevent_default:true}).on('pinchin pinchout',function(e){
        e.stopPropagation();
        e.gesture.stopPropagation();
        e.gesture.stopDetect();

        switch(e.type){
           case 'pinchout':
           $img.transition({scale: 2});
        break;
           case 'pinchin':
           $img.transition({scale: 1});
        break;
            }       
    })
    $('.ps-document-overlay').pep(); //THIS IS THE ATTEMPT TO MAKE IMG DRAGGABLE
});

有关为什么它不起作用的任何建议？

Answer 1

你试过了吗？

pointer-events:none;

在ui-overlay的css文件中？

使用Photoswipe，Hammer.js和Transit.js轻松放大Android

1 个答案: