CODEWITHSUNDEEP
angularjsjquery-masonry
arsenalist
arsenalist

Reputation: 391

How do I implement Angular Deckgrid so that it displays?

I'm having trouble getting the Angular Deckgrid to simply display images.I have added the depency. I have an object. However nothing is showing up on the screen for title. The only error I'm getting in the console is angular-deckgrid: No CSS configuration found. I also am including the script files in the 'head' . Any help in this would be appreciated. See below sample code:

Index.html

 <html ng-app="myApp">
        <script src="javascripts/Angular/angular.min.js"></script>
        <script src="javascripts/Angular/angular-route.min.js"></script>
        <script src="javascripts/bower_components/angular-deckgrid/angular-deckgrid.js"></script>
        <script src="javascripts/imagesloaded.pkgd.min.js"></script>
        <script src="javascripts/Angular/app.js"></script>

               <div ng-controller="mainController">
                 <div deckgrid class="deckgrid" source="photos">
                     <div class="a-card">
                        <h1>{{card.title}}</h1>
                       <img src="" data-ng-src="{{card.src}}">
                     </div>
                </div>
           </div>

app.js

var myApp = angular.module('myApp',['akoenig.deckgrid']);

myApp.controller('mainController', ['$scope',function($scope) {

    $scope.photos = [   {title: 'something here',src: "Images/ipsum/one.jpg"},
                        {title: 'another picture', src: "Images/ipsum/two.jpg"},
                        {title: 'another picture', src: "Images/ipsum/three.jpg"},
                        {title: 'another picture', src: "Images/ipsum/four.jpg"},
                        {title: 'another picture', src: "Images/ipsum/five.jpg"},
                        {title: 'another picture', src: "Images/ipsum/six.jpg"}
                    ];

    }]);

Upvotes: 1

Views: 974

Answers (1)

Luiz Filipe
Luiz Filipe

Reputation: 21

you need use this css

   <style>
    .deckgrid[deckgrid]::before {
        content: '4 .column.column-1-4';
        font-size: 0;
        visibility: hidden;
    }

    .deckgrid .column {
        float: left;
    }

    .deckgrid .column-1-4 {
        width: 25%;
    }
   </style>

Reference: https://github.com/akoenig/angular-deckgrid

Upvotes: 1

Related Questions