API Reference


Angular photo grid

1.0.4  •  Updated 4 years ago  •  by Nhan Nguyen  •  MIT License


Photo grid like facebook in angular js with no dependencies. Work well when images have variety in dimension, scale images but respect ratio and improve display images in cells.

Examples page

angular facebook photo grid with default config

angular facebook photo grid with 2 bigs image first

angular facebook photo grid with square config

This module can be used with these options:

Option Description Value Default
urlKey object attribute present for image url ex:{url: “/example.jpg”} => urlKey: “url” string “original_url”
sortByKey object attribute present for order of object in array ex:[{nth: 1}, {nth: 2}] => sortByKey: “nth” string “nth”
onClicked image click event handler, argument is clicked image function none
onBuilded callback when grid was built completed function none
onDOMReady callback when DOM generated completely from array images object fucntion none
margin space between each image on grid number 2
maxLength maximum objects in array grid choose to build number 5
isSquare options to build grid has the height equals to width ex: used to display grid of grids without break layout boolean false
buildOnLoading option to trigger build grid, grid be built while images loading if it’s true. Otherwise, grid will be built only one when all image loaded boolean true


  This directive used to built the grid of images 
  (let's look at the demo source code to see how the array of images look like), 
  so you should prepare the array of images object first 
  then following this guide below.

####1. Inject module to your angular app definition:

angular.module("ngApp", ["ngPhotoGrid"])

####2. On your controller, you should define the options and events handler if needed like this:

  $scope.gridOptions = {
    urlKey      :     "original_url",
    sortKey     :     "nth",
    onClicked   :     function(image) {
    onBuilded   :     function() {
                        console.log ("built completed!")
                        $scope.isBuildingGrid = false;
    margin      :     2,
    maxLength   :     7

####3. Use directive in template like this:

<div ng-photo-grid="" images="images" grid-options="gridOptions"></div>

####4. Open browser then see the magic, you can refresh (F5) browser again to see others style of grid was built (if your images were random order and have different dimension)

####Updated: 08-11-2015

  • Fixed display grid when has 2 images
  • Added css border to grid cell. Include style in border.css if you want grid cell is bordered.

####Others Contribution are welcome so if you find any issue, please post issues or email me at: jerryc.nguyen92[at]gmail.com

Thanks lorempixel.com for better images in demo pages.

##MIT License




Last ver 4 years ago
Created 4 years ago
Last commit 1 second ago
1 second between commits


Node version: 6.3.0
0 unpacked


MIT License
OSI Approved
0 vulnerabilities


0 contributors



Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
© 2020 Devstore, Inc.