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.
You can install via Bower components
bower install --save angularZoomDirectiveCG
Or You can dowload the
js and
css file and linked into your application
<link href="angular-zoom-directive.css" rel="stylesheet">
<script type="text/javascript" src="angular-zoom-directive.js"></script>
After that, you only need to inject in your application
'angular-zoom-directive'
<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, image or directive to indicate loading</div>
</angular-zoom-directive>
This directive depends on Angular-Material library.