AngularJs Picture Gallery Module

Added by: Sam Deering





Stars: 1

Watchers: 1

Forks: 0


Idan Sagi
Idan Sagi

Module Description


AngularJs Picture Gallery Module Showing angular powers

install guide :

  1. make sure angular-bootstrap is included in your project.
  2. add the picture-gallery.js and css files to the project.
  3. drop the image files in ../images.
  4. add 'ng-pictureGallery' to your app dependencies

congrats you now have ng-pictureGallery in your project

usage :

in your view.html file add the following tag

<my-gallery collection="" url="" pagesizes="" defaultsize=""/>   

the directive accepts 4 attributes :

  1. collection : creates an isolated scope and bind to a collection in your controller
  2. url : the url for your images ('http://route/to/my/images.json
  3. pagesizes : sets pages sizes for paging accepts array (default is [5,10,15,20])
  4. defaultsize : sets default page size (default is 10)

the directive can be used in 2 ways :

  1. just specify a url and let the magic happen.

  2. consume the gallerySrv service in your controller and invoke the getImages() method (returns promise), in the markup specify the collection on your controller you wish to bind to (collection="myCollection").

there is also a build-in controller called 'galleryController'.

example controller :

angular.module('galleryApp').controller('aCtrl', function($scope, gallerySrv) {
        $scope.images = [];
        $scope.url = 'path/to/images';
        gallerySrv.getImages(url).then(function(data) {
            $scope.images = data;

<my-gallery collection="images"/>

Module stats last updated: 2015-04-19 02:51:51

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!