A step by step approach to make a Photo Gallery in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 480 red flag

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.


 Download source code for A step by step approach to make a Photo Gallery in AngularJS

Recommendation
Read A step by step approach to make a Photo Collage in AngularJS before this article.

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.

Recommendation
Read Pagination using EmberJS and WebAPI after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)