Angular Zoom Directive

The objective of this directive is add the possibility to zoom an image with a desktop until a movile device.

The directive, detects if the device has "mousemove" event (for desktops) and if not, try to listen the angular-material drag event.

The zoomed image is loaded in an async way, that make a great performance when the page loads.

Demo: https://cesar-garay.github.io/zoom-directive

Installation

bower install --save angularZoomDirectiveCG

or

download https://github.com/cesar-garay/zoom-directive/blob/master/src/angular-zoom-directive.js and https://github.com/cesar-garay/zoom-directive/blob/master/src/angular-zoom-directive.css and link in your html file.

Then add angular-zoom-directive to your angular dependencies

Usage

Html sample

<angular-zoom-directive thumb="path-to-thumb-image" zoom="path-to-zoom-image" size="multiplied-size">
    <label>Message to indicate how to zoom. Could be multiple</label>
    <div class="zoom-loading">Text to indicate loading, or and image or directive</div>
</angular-zoom-directive>

Dependencies

This directive depends on https://material.angularjs.org/latest/ library.