CODEWITHSUNDEEP
angularjstwitter-bootstrapjquery-uihtml5-canvas
mainprashant89
mainprashant89

Reputation: 77

Creating dynamic image gallery using angularjs and bootstrap

How do I create a dynamic image gallery to show thumbnails using angularjs and bootstrap where images will be dynamically added on load. Also it should fit in mobiles, desktops and tablets.

Upvotes: 1

Views: 9587

Answers (2)

Antony Joslin
Antony Joslin

Reputation: 319

Try this codepen

Using AngularJS, css and html you can simply do it.

HTML

<h1>angular gallery</h1>
<div ng-app="gallery">
  <div ng-controller="GalleryCtrl"><gallery></gallery></div>
</div>

AngularJS

angular.module('gallery', [])
.controller('GalleryCtrl', ['$scope', function($scope) {
 $scope.pictures = [
{name:"first", 
 img:"http://placehold.it/200?text=first"
},
{name:"second", 
 img:"http://placehold.it/200?text=second"},
{name:"third", 
 img:"http://placehold.it/200?text=third"},
{name:"fourth", 
 img:"http://placehold.it/200?text=fourth"},
{name:"fifth", 
 img:"http://placehold.it/200?text=fifth"},
{name:"sixth", 
 img:"http://placehold.it/200?text=sixth"},
{name:"seventh", 
 img:"http://placehold.it/200?text=seventh"},
{name:"eighth", 
 img:"http://placehold.it/200?text=eighth"},
 ]
 }])
.directive('gallery', function() {
 return {
 replace: true,
 restrict: 'E',
 controller: 'GalleryCtrl',
 template: '\
  <div class="gallery">\
  <div class="picture" ng-repeat="picture in pictures">\
    <img src="{{ picture.img }}">\
  </div>\
</div>'
}
});

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26444

First make sure jQuery and AngularJS are both loaded through script tags. jQuery must be loaded first because Angular uses jQuery.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

To use Angular code in your HTML views, you need to bootstrap your application with the ng-app directive. Set it's value equal to what you declared in your JavaScript file. You can place this directive anywhere you like, but the best places are either the html or body tags.

Your controllers are what connects the scope with your view. You need to use the ng-controller directive in order to use this scope.

Bootstrap uses the grid system. You want to nest a div with class row inside your container and inside another class taking up 3/4 of the screen on tablets and desktops and the full-width on mobile devices.

To make images responsive, bootstrap has an img-responsive class. Using angular, you can have an array of image data, and use ng-repeat to iterate over each image. I think the best way to do this would be through a hash.

<html ng-app="myApp">
  <body ng-controller="myCtrl">
    <div class="container">
      <div class="row">
        <div class="col-md-9 col-sm-9 col-xs-12">
          <img class="img-responsive" ng-repeat="image in images" ng-src="image.src" alt="{{image.alt}}" />
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
        $scope.images = [
            { "src": "image1.png", "alt": "First Image" }, 
            { "src": "image2.png", "alt": "Second image" }, 
            { "src": "image3.png", "alt": "Third image" }, 
            { "src": "image4.png", "alt": "Fourth image" }
        ];
    }]);

Hope this helps.

Upvotes: 2

Related Questions