In previous article, I have written Angular JS directive for Mouse Wheel Scroll. In this article we will see how to implement Image Zoom In and Zoom Out using those Angular JS directives.

Program Flow

  1. Style of the element can be manipulated by ng-style pre-defined directive. Initialize style for the object imgStyle = {  width:"100px" } and zoomWidth = 100
  2.  On Mouse scroll up increment zoomWitdth by 20 and assign to imgStyle.width
  3.  On Mouse scroll down decrement zoomWitdth by 20 and assign to imgStyle.width 

Markup

<img src="/my-pic.jpg" ng-init="zoomWidth = 100;imgStyle = {width:'100px'}" ng-style="imgStyle" 
ng-mouse-wheel-up="zoomWidth = zoomWidth + 20; imgStyle.width = zoomWidth +'px'; "  
ng-mouse-wheel-down="zoomWidth = zoomWidth - 20;imgStyle.width = zoomWidth  +'px'; "/>

Script

var myApp = angular.module('myApp', []);


function MyCtrl($scope) {
  // controller code here
}

myApp.directive('ngMouseWheelUp', function() {
        return function(scope, element, attrs) {
            element.bind("DOMMouseScroll mousewheel onmousewheel", function(event) {
                   
                        // cross-browser wheel delta
                        var event = window.event || event; // old IE support
                        var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
                
                        if(delta > 0) {
                            scope.$apply(function(){
                                scope.$eval(attrs.ngMouseWheelUp);
                            });
                        
                          // for IE
                          event.returnValue = false;
                          // for Chrome and Firefox
                          if(event.preventDefault) event.preventDefault();                        
                       }
            });
        };
});


myApp.directive('ngMouseWheelDown', function() {
        return function(scope, element, attrs) {
            element.bind("DOMMouseScroll mousewheel onmousewheel", function(event) {
                   
                        // cross-browser wheel delta
                        var event = window.event || event; // old IE support
                        var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
                
                        if(delta < 0) {
                            scope.$apply(function(){
                                scope.$eval(attrs.ngMouseWheelDown);
                            });

                          // for IE
                          event.returnValue = false;
                          // for Chrome and Firefox
                          if(event.preventDefault) event.preventDefault();                        
                       }
            });
        };
});

0 comments:

Blogroll

Follow this blog by Email

Popular Posts