Last updated on July 31st, 2016 at 11:11 am
This post is helpful for those who want to implement image zoom feature on there web application. For this post i am going to use cloud-zoom library. This post is very helpful if you building web application for e-commerce etc. Most of eCommerce website have this feature but if you are building your own same feature in your application using angular then follow bellow steps. Before we start implement cloud zoom i hope u have good understanding of angular.js .
Step 1. Create html file and angular CDN and also add cloud zoom CSS and library. I also add some raw data as constant to set data.
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Cloud Zoom on image using AngularJS - TrinityTuts</title>
<link href="http://www.professorcloud.com/styles/cloud-zoom.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type="text/JavaScript" src="http://www.professorcloud.com/js/cloud-zoom.1.0.2.js"></script>
<script src="app.js"></script>
<script>
app.constant('data', {"productImage":[{"id":"40","pid":"211","imageSrc":"99befa84e9462bf47bf7419b531b4846.jpg","home":"1"},{"id":"41","pid":"211","imageSrc":"7f5fb82a337bd7e4509b4563e11b0482.jpg","home":"0"},{"id":"33","pid":"211","imageSrc":"12875724b113958f749794b8011dc9ac.jpg","home":"0"}]});
</script>
</head>
<body ng-controller="MainCtrl">
<div zoom2 big="SelectedItem.big" tiny="SelectedItem.tiny" small="SelectedItem.small" alt="" title="SelectedItem.title"></div>
<div ng-repeat="item in ZoomItems" style="disaplay:block;" >
<img src="{{item.tiny}}" alt="{{item.alt}}" ng-click="ThumbnailClicked(item)" />
</div>
</body>
</html>
Step 2. Now create app.js file for your angular code and paste bellow code in it
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, data) {
$scope.ZoomItems = [];
for(var i = 0; i < data.productImage.length; i++){
$scope.ZoomItems.push({
id: i,
big: "http://stock.web6.in/design5/images/"+data.productImage[i].imageSrc,
tiny: "http://stock.web6.in/design5/air/w40-h60/"+data.productImage[i].imageSrc,
small: "http://stock.web6.in/design5/air/w350-h450/"+data.productImage[i].imageSrc,
title: "display title",
});
}
$scope.SelectedItem = $scope.ZoomItems[0];
$scope.ThumbnailClicked = function(Item) {
$scope.SelectedItem = Item;
};
});
app.directive('thumbnail', [
function() {
return {
restrict: 'AC',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
var src = elem.find('img').attr('src');
// call your SmoothZoom here
angular.element(attrs.options).css({
'background-image': 'url(' + src + ')'
});
});
}
};
}
]);
app.directive('zoom', [
function() {
return {
restrict: 'AC',
scope: {
// tiny: "=",
// small: "=",
// big: "=",
// title: "=",
},
link: function(scope, elem, attrs) {
var str = '<a href="' + attrs.tiny + '" class="cloud-zoom" rel="adjustX: 10, adjustY:-4" />';
elem.wrap(str);
$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
}
};
}
]);
app.directive('zoom1',
function($compile) {
return {
restrict: 'AC',
scope: {
title: "=",
tiny: "=",
small: "=",
big: "="
},
link: function(scope, element, attrs) {
var str = '<a href="' + scope.big + '" class="cloud-zoom" rel="adjustX: 10, adjustY:-4">' +
'<img src="' + scope.small + '"/></a>';
var e = $compile(str)(scope);
element.replaceWith(e);
$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
}
};
});
app.directive('zoom2', ['$compile',
function($compile) {
return {
restrict: 'AC',
scope: {
tiny: "=",
small: "=",
big: "=",
title: "="
},
controller: ["$scope", "$attrs", "$element", "$compile",
function($scope, $attrs, $element, $compile) {
$scope.init = function() {
//Create a watch to know when to open the PopOver Text
$scope.$watch('tiny + small + big + title', function(newValue, oldValue) {
console.log("in watch.");
var str =' <a href="' + $scope.big + '" class="cloud-zoom" rel="adjustX: 10, adjustY:-4">' +
'<img src="' + $scope.small + '"/></a>';
var e = $compile(str)($scope);
$element.html(e);
$(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
}, true);
}; // end init
$scope.init();
}
]
};
}
]);
And done.