O'Reilly logo

Learning AngularJS by Brad Dayley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding a Zoom View Field to Images

In this example you will use a custom AngularJS directive to replace the <img> element and provide an automatic zoom view field that is displayed next to the image on the page. When you click on the image, the zoom view field will be updated with a zoomed-in portion of the image.

The purpose of this exercise is to show you how AngularJS custom directives can extend HTML with new elements that have a rich set of features. This example also illustrates another time when you will want to use the full version of jQuery rather than jQuery lite to get the size of the image and position of the mouse within the image.

The folder structure for this example is as follows:

./server.js: Node.js web server that serves ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required