I am using ElevateZoom plugin in my application. If the image resolution is good it is able to zoom but when the image resolution is small it's not working. Here is the code:
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=""/>
where zoom-image, actual-src data-zoom-image all having same image.
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();
}
};
});
Plugin : elevatezoom
