Responsive AngularJS Image Gallery with thumbnails

During I searched for a responsive AngularJS image gallery I found many third party paid components. But sorry to say my Customer wants some thing free. In this regard I did suggest the customer to implement a responsive image gallery with thumbnail using AngularJS. It is easy & less time consuming. Finally, the Customer get agree to my proposal & order me to develop the POC. I did that & sharing the same script in below for your reference.

Here I have a html file & in the root directory I have an images folder. Which contains all the thumbnail & original images. Inside the AngularJS controller I declared a scope object imageDetails. In this object I am keeping number of images & image file names. For SEO purpose here I added alt & title tag for each images. To bind the images in HTML I am using ul li elements. By CSS controlling it’s responsiveness. I used as minimum styles I can. According to your mockup you can configure the classes for desire look n feel.

To show the popup for individual thumbnail view I am calling a function popupOriginal() in the click event of thumbnail image. Where I am passing the file name from scope imageDetails object. During popup if user will click the body area popup is getting hide. This image gallery is capable to display any number of images. To achieve more number of images you just need to add image details in scope imageDetails object. This demo app is responsive to handle any resolution.

AngularJS Image Gallery Example

<!DOCTYPE html>
<html ng-app="imgGallery">
<head>
<title>Create your own AngularJS Image Gallery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var imgGalleryModule = angular.module('imgGallery', []);
imgGalleryModule.controller('imageGalleryController', function ($scope) {
/*Developed by http://jharaphula.com*/
/*Folder path where all the images are stored*/
$scope.imgFolderPath = "images/";
/*Image details like File Name & SEO related alt & title tags for each image*/
$scope.imageDetails = [
{'thumbnail': 'image-1.png', 'realImage': 'original-image-1.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-2.png', 'realImage': 'original-image-2.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-3.png', 'realImage': 'original-image-3.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-4.png', 'realImage': 'original-image-4.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-5.png', 'realImage': 'original-image-5.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-6.png', 'realImage': 'original-image-6.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-7.png', 'realImage': 'original-image-7.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-8.png', 'realImage': 'original-image-8.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-9.png', 'realImage': 'original-image-9.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-10.png', 'realImage': 'original-image-10.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-11.png', 'realImage': 'original-image-11.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'},
{'thumbnail': 'image-12.png', 'realImage': 'original-image-12.png', 'alt': 'label on Mouse Over', 'title': 'label on Mouse Over'}
];
/*Function to assign real image path*/
$scope.popupOriginal = function(originalImagePath) {
$("#popupDiv").show();
$("#popupDiv").html("<img src='images/" + originalImagePath + "' />");
};
});
/*Developed by http://jharaphula.com*/
/*Closing the popup in body click*/
$(document).mouseup(function (e)
{
var container = $("#popupDiv");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
</script>

<style type="text/css">
/*Styles related to ul li elements*/
.imgGallery { text-align:center; }
.imgGallery ul { padding: 0; margin: 0; }
.imgGallery ul li { display: inline; cursor: pointer; }
.imgStyle { margin: 10px; }
/*Style related to popup window*/
#popupDiv {
display: none;
position:fixed;
top: 50%;
left: 50%;
width: 640px;
height: 400px;
margin-top: -12em;
margin-left: -20em;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="imgGallery" ng-controller="imageGalleryController">
<ul>
<li ng-repeat="image in imageDetails">
<img ng-click="popupOriginal(image.realImage);" class="imgStyle" alt="{{ image.alt }}" title="{{ image.title }}" src="{{ imgFolderPath }}{{ image.thumbnail }}" />
</li>
</ul>
<!--Popup Div to show original Images-->
<div id="popupDiv"></div>
</body>
</html>

In this above example I used 12 sample images to show the Gallery. You can save as the below image & create more 11 images with the name declared above. Just update the slide number or even you can use your images with same resolution.

image-1.png
image-1

original-image-1.png
original-image-1