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

Last Updated on: September 16, 2018 by Pakainfo

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

Contents

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

Include Libs.

index.html



Zoom In and Zoom Out Image Using Mouse Wheel Scroll with Angular JS

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;
}

Leave a Comment Cancel reply