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