Menu
I am trying to make a simple photo gallery in angularJS. Below is the code
<!DOCTYPE html>
<html >
<head>
<title></title>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="testModule" ng-controller="testCtrl">
<div style="width: 60%; margin: 0 auto;">
<div id="dp"></div>
</div>
</body>
</html>
function testMe(imgSrc) {
alert(imgSrc);
}
angular
.module('testModule', [])
.controller('testCtrl', function($scope) {
var photoSource = [
["images/ph1.jpg", "images/ph2.jpg"],
["images/ph5.jpg", "images/ph6.jpg"]
];
var body = "<table>";
var row = 2;
var col = 2;
for (var i = 0; i < row; i++) {
body += "<tr>";
for (var j = 0; j < col; j++) {
body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
}
body += "</tr>";
}
body += "</table>";
console.log(body);
$("#dp").html(body);
});
The problem is that, when the mouse is over an image I want to display that image in the center on a div tag. But this portion I could not achieve.
568
you don't need to manipulate the html inside your controller instead use bindings of angular so your javascript becomes
function testMe(imgSrc) {
alert(imgSrc);
}
angular
.module('testModule', [])
.controller('testCtrl', function ($scope) {
$scope.photoSource = [
[ "images/ph1.jpg","images/ph2.jpg"],
[ "images/ph5.jpg","images/ph6.jpg"]
];
$scope.showFullImage = function(photoSrc) {
// this function will call when you mouseover so add logic here and photosrc will be current mouseover image src
}
});
now in your html use this photoSource scope variable to generate table
<body ng-app="testModule" ng-controller="testCtrl">
<div style="width: 60%; margin: 0 auto;">
<div id="dp">
<table>
<tr ng-repeat="photos in photoSource">
<td ng-repeat="photo in photos">
<img ng-src="{{photo}}" ng-mouseover="showFullImage(photo)" />
</td>
</tr>
</table>
</div>
</div>
</body>
Two Way Data-Binding is a useful feature of AngularJS. You do not need to write too much logic in your JavaScript.
Try this:
angular.module('testModule', []).controller('testCtrl', function ($scope) {
$scope.photoSource = [
[ "images/ph1.jpg","images/ph2.jpg"],
[ "images/ph5.jpg","images/ph6.jpg"]
];
$scope.fullImage = function (imgSrc) {
$scope.showImage = imgSrc;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testModule" ng-controller="testCtrl">
<div style="width: 60%; margin: 0 auto;">
<div id="ds">
<img ng-src="{{showImage}}"/>
</div>
<div id="dp" style="display: flex;">
<div ng-repeat="photos in photoSource">
<img class="item" ng-src="{{photo}}" ng-mouseover="fullImage(photo)" ng-repeat="photo in photos" style="max-width: 100%"/>
</div>
</div>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
