ImageViewer-angular image zoom-in And Zoom-Out Example

ImageViewer-angular image zoom-in And Zoom-Out Example

A Simple directive lightweight AngularJS based web-application to display images in a larger size to convert zoom-in and zoom-out based images in a simple way.

Angular Image Zoom-in And Zoom-Out Example

A zooming image and panning images plugin simple inspired by all the photos for your web-apps images.A simple angular.js diretive that supported basic image-hover-zoom feature like AngularJS Animation.
ImageViewer-angular image zoom-in And Zoom-Out Example

Best AngularJs Zoom Directives Plugins

There are the Following list of AngularJs zoom plugin.
1. zoomPan : Angular.js custom directive that Zooms and Pans
2. Angular simple Pinch Image Zoom-in and zoom-out Directive
3. Image Zoom-in and zoom-out with AngularJS
Native AngularJs Directive that provide image hover zoom feature

Read Also:  How to validate phone numbers using jquery?

Include Libs.

index.html

<div>
<h1>Zoom In and Zoom Out Image Using Mouse Wheel Scroll with Angular JS</h1>
</div>

<img src="https://www.pakainfo.com/dipu/img/ng9.jpg" />

</div>

index.js

angular image zoomin directive Example and angular image zoomout directive example

var liveApp = angular.module('liveApp', []);
function liveCtrl($scope) {
  // controller code simple here
}
//angular image zoom directive
liveApp.directive('ngMouseWheelUp', function() {
        return function(scope, result, param) {
            result.bind("DOMMouseScroll mousewheel onmousewheel", function(mste) {
            	        var mste = window.mste || mste; 
            	        var ldata = Math.max(-1, Math.min(1, (mste.wheelldata || -mste.detail)));
            	
            	        if(ldata > 0) {
                            scope.$apply(function(){
                                scope.$eval(param.ngMouseWheelUp);
                            });
                          mste.returnValue = false;
                          if(mste.prmsteDefault) mste.prmsteDefault();                        
                       }
            });
        };
});

liveApp.directive('ngMouseWheelDown', function() {
        return function(scope, result, param) {
            result.bind("DOMMouseScroll mousewheel onmousewheel", function(mste) {
            	        var mste = window.mste || mste; 
            	        var ldata = Math.max(-1, Math.min(1, (mste.wheelldata || -mste.detail)));
            	
            	        if(ldata < 0) {
                            scope.$apply(function(){
                                scope.$eval(param.ngMouseWheelDown);
                            });
                          mste.returnValue = false;
                          if(mste.prmsteDefault) mste.prmsteDefault();                        
                       }
            });
        };
});

style.css

img {
  cursor: -webkit-zoom-in; 
  cursor: -moz-zoom-in;
}

Example

Example