Install

zoomPan is a basic Angular.js custom directive that zooms and pans as you move the cursor over the image. I have tried to keep the code as minimal as possible so it can be easily adapted.

To use download and place the zoomPan directory into your working directory and include the script and style sheet in your markup. You can then use the directive in your project:

<html ng-app="zoomPanApp">

<head>
	<script src="js/zoomPan.js"></script>
	<link href="css/zoomPan.css" rel="stylesheet" type="text/css">
</head>

<body>
	<zoom src="./imageURL.jpg" frame="example1" img="image1" zoomlvl="1.5"></zoom>

In this example the image url is placed directly into the directive but this could easily come from a binding defined elsewhere. Three other properties are also set (*Mandatory Properties) ;

frame - provide a unquie identifier to be attributed to the image containter *
img - provide a unquie identifier to be attributed to the actual image *
zoomlvl - provide a scale to zoom by, default 2.5

Logic

On page load zoomPan gets the frame and image by ID. It then collects the relevent data to calculate the frame's top and left offset from the document edge. Using this offset the relative X and Y position of the cursor over the image can then be found. This position can then be turned into a percentage which is fed into the origin transform on the image.

//((cursor X/Y location - image left/top offset) ÷ width/height of image) * 100)
xPosition = (($event.pageX - offsetL) / fWidth) * 100
yPosition = (($event.pageY - offsetT) / fHeight) * 100

pan = xPosition + "% " + yPosition + "% 0";
image.style.transformOrigin = pan;