A native angular.js diretive that provide basic image-hover-zoom feature like jQuery's CloudZoom
Created for http://owl.gift
- JS: min: 3,015 B
- CSS: 650 B
- Template: 148 B
http://owlsomely.github.io/angular-image-zoom/
-
include the image-zoom as a dependency for your app.
angular.module('myApp', ['ImageZoom']);
-
include the supplied CSS file (or create your own).
-
add image-zoom element
<div image-src="./Pevensey_castle-09.jpg" image-zoom></div>Alternate Template URL
<div image-src="./Pevensey_castle-09.jpg" image-zoom data-template-url="/assets/my-image-template.html"></div>- optional Switch Images (refer to the demo):
<body ng-app="ImageZoomExample" ng-controller="ExampleCtrl">
<div class="container">
<h1>Angular Image Zoom Demo</h1>
<div class="thumbnail" style="width: 400px;">
<div image-src="./Pevensey_castle-09.jpg" image-zoom>
</div>
</div>
<h2>Switch Images</h2>
<div class="row thumbnails">
<div class="col-xs-4">
<a ng-click="switchImage('Pevensey_castle-09.jpg')" class="thumbnail product-image">
<img src="320px-Pevensey_castle-09.jpg" alt="wooops" />
</a>
</div>
<div class="col-xs-4">
<a ng-click="switchImage('Pevensey_Castle_exterior.jpg')" class="thumbnail product-image">
<img src="320px-Pevensey_Castle_exterior.jpg" alt="woops" />
</a>
</div>
</div>
</div>
</body>npm install
grunt dev
grunt build
Chen Liang
Inspired by https://github.com/jotielim/ng-magnify
Licensed under the MIT license