yblee85 · April 7, 2013 18:38
diff --git a/gistfile1.txt b/gistfile1.txt
 just in case, dzi example code below.

 /******************************* index.html *****************************************/
 <!DOCTYPE html>
 <html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />'); 
    </script>
    <script src="app.js"></script>
  </head> 
   
  <body>
      
      <deepzoom-image
      dzi-mouse-wheel
      up="bigger()"
      down="smaller()"
      ng-style="style()"
      class="small"
      uri="dzi/uuid"
      view_width="222" 
      view_height="220">
      </deepzoom-image>
    
  </body> 

 </html>
 /**************************************************************************************/


 /************************************* style.css ************************************/
 /* CSS goes here */

 .big {
  width : 200px;
  height : 200px
 }

 .small {
  width : 100px;
  height : 100px
 }
 /*************************************************************************************/


 /********************************** app.js *******************************************/
 var app = angular.module('angularjs-starter', []);

 function getMaximumLevel(){
    var level = Math.ceil( Math.log( Math.max( width, height ))/Math.LN2);
    return level;
  }


 app.directive("deepzoomImage",function(){
  var tile_size = 256;
  var overlap = 1;
  var image_format = "png";
 
  return { 
    restrict: "E",
    controller: function($scope) {
      console.log("deepzoomImage controller fn start");
      $scope.bigger = function(){
        //$scope.view_width = 500;
        //$scope.view_height = 500;
        $scope.view_width = Math.ceil($scope.view_width*1.15);
        $scope.view_height = Math.ceil($scope.view_height*1.15); 
        $scope.$digest();
      };
      $scope.smaller = function(){
        //$scope.view_width = 100;
        //$scope.view_height = 100;
        $scope.view_width = Math.ceil($scope.view_width/1.15);
        $scope.view_height = Math.ceil($scope.view_height/1.15); 
        $scope.$digest();
      };
      
      $scope.style = function () {
       return { 
                'height': $scope.view_width + 'px',
                'width': $scope.view_height + 'px' 
              };
      };
      
      console.log("deepzoomImage controller fn finish");
    },
    scope : {
      view_width:"@",
      view_height:"@", 
      up:'&',
      down:'&',
      uri : "="
    },
    link:function(scope,element,attr,controller){
      console.log("deepzoomImage link function start");
      var temp_width = attr.viewWidth;
      var temp_height = attr.viewHeight;
      
      var deepzoom_element = angular.element('<img src="http://placehold.it/' + temp_width + 'x' + temp_height + '">');
      element.append(deepzoom_element);
      
      scope.$watch("view_width", function(dimension,old_dimension,scope){
        console.log("watch width start ");
        // initialize scope size
        if(scope.view_width==null || scope.view_height==null) {
          scope.view_width = temp_width;
          scope.view_height = temp_height;
        }
        deepzoom_element[0].src = "http://placehold.it/"+scope.view_width+"x"+scope.view_height;
        console.log("watch width finish");
      });
      
      width = parseInt(temp_width,10);
      height = parseInt(temp_height,10);
      scope.scope_pyramid_levels = getMaximumLevel(width,height);
      computeLevels(width,height,tile_size);
      console.log("deepzoomImage link function finish");
    }
  };
 });

 generalMouseWheel = function() {
  return {
    link : function(scope, element, attr) {
      console.log("mousewheel link fn start");
      element.bind('mousewheel', function(event) {
            var delta = event.wheelDeltaY;
            var dir = delta > 0 ? 'Up' : 'Down';
            var vel = Math.abs(delta);
            if(dir=='Up') {
              console.log("up, scope size ", scope.view_width, "x", scope.view_height);
              //scope.up(); this doesn't work
              scope.bigger();
            } else {
              console.log("down");
              //scope.down();
              scope.smaller();
            }
            return false;
        });
      console.log("mousewheel link fn start");  
    }
  };
 }

 dziMouseWheel = angular.extend({
  require : '^deepzoomImage'
 }, generalMouseWheel());

 app.directive("dziMouseWheel",function(){
  return dziMouseWheel;
 });

 function computeLevels( width , height, tileSize )
 {
  var maxLevel   = getMaximumLevel( width, height );
  var columns ;
  var rows ;

  for( var level  = maxLevel; level >= 0; level-- )
  {
    // compute number of rows & columns
    columns = Math.ceil( width / tileSize );
    rows = Math.ceil( height / tileSize );

    console.log( "level " , level , " is " , width , " x " , height , " (" , columns , " columns, " , rows , " rows)" );

    // compute dimensions of next level
    width  = Math.ceil( width / 2 );
    height = Math.ceil( height / 2 );
  }
 }
 /**************************************************************************************/
	just in case, dzi example code below.

	/***************************** index.html ***************************************/
	<!DOCTYPE html>
	<html ng-app="angularjs-starter">

	<head lang="en">
	<meta charset="utf-8">
	<title>Custom Plunker</title>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

	<link rel="stylesheet" href="style.css">
	<script>
	document.write('<base href="' + document.location + '" />');
	</script>
	<script src="app.js"></script>
	</head>

	<body>

	<deepzoom-image
	dzi-mouse-wheel
	up="bigger()"
	down="smaller()"
	ng-style="style()"
	class="small"
	uri="dzi/uuid"
	view_width="222"
	view_height="220">
	</deepzoom-image>

	</body>

	</html>
	/**************************************************************************************/


	/*********************************** style.css **********************************/
	/* CSS goes here */

	.big {
	width : 200px;
	height : 200px
	}

	.small {
	width : 100px;
	height : 100px
	}
	/*************************************************************************************/


	/******************************** app.js *****************************************/
	var app = angular.module('angularjs-starter', []);

	function getMaximumLevel(){
	var level = Math.ceil( Math.log( Math.max( width, height ))/Math.LN2);
	return level;
	}


	app.directive("deepzoomImage",function(){
	var tile_size = 256;
	var overlap = 1;
	var image_format = "png";

	return {
	restrict: "E",
	controller: function($scope) {
	console.log("deepzoomImage controller fn start");
	$scope.bigger = function(){
	//$scope.view_width = 500;
	//$scope.view_height = 500;
	$scope.view_width = Math.ceil($scope.view_width*1.15);
	$scope.view_height = Math.ceil($scope.view_height*1.15);
	$scope.$digest();
	};
	$scope.smaller = function(){
	//$scope.view_width = 100;
	//$scope.view_height = 100;
	$scope.view_width = Math.ceil($scope.view_width/1.15);
	$scope.view_height = Math.ceil($scope.view_height/1.15);
	$scope.$digest();
	};

	$scope.style = function () {
	return {
	'height': $scope.view_width + 'px',
	'width': $scope.view_height + 'px'
	};
	};

	console.log("deepzoomImage controller fn finish");
	},
	scope : {
	view_width:"@",
	view_height:"@",
	up:'&',
	down:'&',
	uri : "="
	},
	link:function(scope,element,attr,controller){
	console.log("deepzoomImage link function start");
	var temp_width = attr.viewWidth;
	var temp_height = attr.viewHeight;

	var deepzoom_element = angular.element('<img src="http://placehold.it/' + temp_width + 'x' + temp_height + '">');
	element.append(deepzoom_element);

	scope.$watch("view_width", function(dimension,old_dimension,scope){
	console.log("watch width start ");
	// initialize scope size
	if(scope.view_width==null \|\| scope.view_height==null) {
	scope.view_width = temp_width;
	scope.view_height = temp_height;
	}
	deepzoom_element[0].src = "http://placehold.it/"+scope.view_width+"x"+scope.view_height;
	console.log("watch width finish");
	});

	width = parseInt(temp_width,10);
	height = parseInt(temp_height,10);
	scope.scope_pyramid_levels = getMaximumLevel(width,height);
	computeLevels(width,height,tile_size);
	console.log("deepzoomImage link function finish");
	}
	};
	});

	generalMouseWheel = function() {
	return {
	link : function(scope, element, attr) {
	console.log("mousewheel link fn start");
	element.bind('mousewheel', function(event) {
	var delta = event.wheelDeltaY;
	var dir = delta > 0 ? 'Up' : 'Down';
	var vel = Math.abs(delta);
	if(dir=='Up') {
	console.log("up, scope size ", scope.view_width, "x", scope.view_height);
	//scope.up(); this doesn't work
	scope.bigger();
	} else {
	console.log("down");
	//scope.down();
	scope.smaller();
	}
	return false;
	});
	console.log("mousewheel link fn start");
	}
	};
	}

	dziMouseWheel = angular.extend({
	require : '^deepzoomImage'
	}, generalMouseWheel());

	app.directive("dziMouseWheel",function(){
	return dziMouseWheel;
	});

	function computeLevels( width , height, tileSize )
	{
	var maxLevel = getMaximumLevel( width, height );
	var columns ;
	var rows ;

	for( var level = maxLevel; level >= 0; level-- )
	{
	// compute number of rows & columns
	columns = Math.ceil( width / tileSize );
	rows = Math.ceil( height / tileSize );

	console.log( "level " , level , " is " , width , " x " , height , " (" , columns , " columns, " , rows , " rows)" );

	// compute dimensions of next level
	width = Math.ceil( width / 2 );
	height = Math.ceil( height / 2 );
	}
	}
	/**************************************************************************************/