AngularJS

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.

Example : index.html



<body ng-app="liveApp" ng-controller="liveCtrl">
<div>
<h1>Zoom In and Zoom Out Image Using Mouse Wheel Scroll with Angular JS</h1>
</div>

<img src="https://pakainfo.com/dipu/img/ng9.jpg" ng-init="inbasezoomw = 100;newzstyle = {width:'100px'}" ng-style="newzstyle" 
ng-mouse-wheel-up="inbasezoomw = inbasezoomw + 20; newzstyle.width = inbasezoomw +'px'; "  
ng-mouse-wheel-down="inbasezoomw = inbasezoomw - 20;newzstyle.width = inbasezoomw  +'px'; "/>

</div>
</body>

Example : App.js


<script>
var liveApp = angular.module('liveApp', []);
function liveCtrl($scope) {
// controller code simple here
}
liveApp.directive('ngMouseWheelUp', function() {
return function(scope, result, param) {
result.bind("DOMMouseScroll mousewheel onmousewheel", function(event) {
		var event = window.event || event; 
		var ldata = Math.max(-1, Math.min(1, (event.wheelldata || -event.detail)));

		if(ldata > 0) {
			scope.$apply(function(){
				scope.$eval(param.ngMouseWheelUp);
			});
		  event.returnValue = false;
		  if(event.preventDefault) event.preventDefault();                        
	   }
});
};
});


liveApp.directive('ngMouseWheelDown', function() {
return function(scope, result, param) {
result.bind("DOMMouseScroll mousewheel onmousewheel", function(event) {
		var event = window.event || event; 
		var ldata = Math.max(-1, Math.min(1, (event.wheelldata || -event.detail)));

		if(ldata < 0) {
			scope.$apply(function(){
				scope.$eval(param.ngMouseWheelDown);
			});
		  event.returnValue = false;
		  if(event.preventDefault) event.preventDefault();                        
	   }
});
};
});

</script>

Example : Style.css


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