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
- Style of the element can be manipulated by ng-style pre-defined directive. Initialize style for the object imgStyle = { width:"100px" } and zoomWidth = 100
- On Mouse scroll up increment zoomWitdth by 20 and assign to imgStyle.width
- 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:
Post a Comment