使用ElevateZoom插件无法缩放小图像

时间:2018-07-18 07:19:30

标签: javascript elevatezoom

我在我的应用程序中使用ElevateZoom插件。如果图像分辨率良好,则可以缩放,但是当图像分辨率较小时,则无法使用。 这是代码:

description.jsp

<img ng-if="mlist.typeId===1" 
                            ng-elevate-zoom
                             zoom-image="{{mlist.mediaUrl}}" id="zimg{{$index}}"
                              actual-src="{{mlist.mediaUrl}}" loader-src="resources/images/loading.gif" loader-class="preloader" showloader 
                              class="img-responsive zoomImg" alt=""/>

其中缩放图像,实际src数据缩放图像都具有相同的图像。

app.js

app.directive('ngElevateZoom', function() {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {

          //Will watch for changes on the attribute
          attrs.$observe('zoomImage',function(){
            linkElevateZoom();
          })

          function linkElevateZoom(){
            //Check if its not empty
            if (!attrs.zoomImage) return;
            element.attr('data-zoom-image',attrs.zoomImage);
            $(element).elevateZoom({zoomType:"lens", cursor:"crosshair"/*, lensSize:250*//**/ /*scrollZoom:true*//*, containLensZoom:true*/});
          }

          linkElevateZoom();

        }
      };
    });

插件:elevatezoom

0 个答案:

没有答案