Custom Image Zoom & Pan Directive – zoomPan

Custom Image Zoom & Pan Directive – zoomPan

zoomPan is a basic Angular.js custom directive that zooms and pans as you move the cursor over the image.

zoomPan

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

Installation

To use download and place the zoomPan directory into your working directory and include the script and style sheet in your markup.

Usage

Basic usage could look somthing like so:

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

  • 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

† These are mandatory properties

  Download Demo
Posted on in and tagged