A Photo gallery is a collection of photos that are put together in a single frame. In this article we will perform a step by step approach to make a Photo Gallery using AngularJS.
Introduction
A Photo gallery is a collection of photos that are put together in a single frame. In this article we will perform a step by step approach to make a Photo Gallery using AngularJS.
Straight to experiment
Step 1 : Photo Collection
Let us first create a folder by the name "images" and gather some images to it
Step 2 : Create the view
Let us frist create a html view say "index.html" as under
<!DOCTYPE html>
<html >
<head>
<title>Simple Photo Gallery - RNA Team</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>
</head>
<body>
<div style="width: 60%; margin: 0 auto;">
<center><font color="blue">Simple Photo Gallery by RNA Team</font></center>
<div id="divPhoto" class="photoDiv"></div>
</div>
</body>
</html>
A simple html file, where we have added the angularJS and jquery reference and added a div to it.
Step 3 : Create the controller
Let us first create a javascript file say "photoGallery.js" in which we will write our controller. We will first define the image sources as under
angular
.module('photoGalleryModule', [])
.controller('photoGalleryCtrl', function ($scope) {
var photoSource = [
[ "images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"],
[ "images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"],
[ "images/9.jpg","images/10.jpg","images/11.jpg","images/12.jpg"],
[ "images/13.jpg","images/14.jpg","images/15.jpg","images/16.jpg"]
];
});
We have initially defined "photoSource" as a 2D array. Next we will create a 4X4 matrix and will create the table with rows and columns and put the Html "img" tag to those cells at runtime as shown below
var body = "<table width='100%' height='575'>";
var row=4;
var col=4;
for(var i=0;i<row;i++){
body += "<tr>";
for(var j=0;j<col;j++)
{
body +="<td> <img width='100%' height='100px' id='"+i+j+"' src='" + photoSource[i][j] + "'onmouseover=borderImage(this);></td>";
}
body += "</tr>";
}
body += "</table>";
$("#divPhoto").html(body);
If we print at the console, the out of the body variable will be
<table width='100%' height='575'><tr><td> <img width='100%' height='100px' id='00' src='images/1.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='01' src='images/2.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='02' src='images/3.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='03' src='images/4.jpg'onmouseover=borderImage(this);></td></tr><tr><td> <img width='100%' height='100px' id='10' src='images/5.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='11' src='images/6.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='12' src='images/7.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='13' src='images/8.jpg'onmouseover=borderImage(this);></td></tr><tr><td> <img width='100%' height='100px' id='20' src='images/9.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='21' src='images/10.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='22' src='images/11.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='23' src='images/12.jpg'onmouseover=borderImage(this);></td></tr><tr><td> <img width='100%' height='100px' id='30' src='images/13.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='31' src='images/14.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='32' src='images/15.jpg'onmouseover=borderImage(this);></td><td> <img width='100%' height='100px' id='33' src='images/16.jpg'onmouseover=borderImage(this);></td></tr></table>
We have defined a function "borderImage" which will be triggered when the mouse focus will be there on the image. The funciton is as under
function borderImage(x) {
x.style.border = "2px solid yellow";
}
Finally we have to bind this to the #divPhoto div as under
$("#divPhoto").html(body);
The complete controller is as under
function borderImage(x) {
x.style.border = "2px solid yellow";
}
angular
.module('photoGalleryModule', [])
.controller('photoGalleryCtrl', function ($scope) {
var photoSource = [
[ "images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"],
[ "images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"],
[ "images/9.jpg","images/10.jpg","images/11.jpg","images/12.jpg"],
[ "images/13.jpg","images/14.jpg","images/15.jpg","images/16.jpg"]
];
var body = "<table width='100%' height='575'>";
var row=4;
var col=4;
for(var i=0;i<row;i++){
body += "<tr>";
for(var j=0;j<col;j++)
{
body +="<td> <img width='100%' height='100px' id='"+i+j+"' src='" + photoSource[i][j] + "'onmouseover=borderImage(this);></td>";
}
body += "</tr>";
}
body += "</table>";
$("#divPhoto").html(body);
});
Also we need to make the corresponding changes to our view (index.html)
<!DOCTYPE html>
<html >
<head>
<title>Simple Photo Gallery - RNA Team</title>
<style>
.photoDiv
{
border: 10px double red;
}
</style>
<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="photoGallery.js"></script>
</head>
<body ng-app="photoGalleryModule" ng-controller="photoGalleryCtrl">
<div style="width: 60%; margin: 0 auto;">
<center><font color="blue">Simple Photo Gallery by RNA Team</font></center>
<div id="divPhoto" class="photoDiv"></div>
</div>
</body>
</html>
We have used the border property with value as double for adding a double border to the div.
border: 10px double red;
Let us run the application and the output is as under
Now hover on any image and the image border will have yellow color
Reference
CSS Reference
Conclusion
In this article we have learnt how to create a simple photo gallery using AngularJS. Hope this will be useful. Thanks for reading. Zipped file attached.