CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
Mou
Mou

Reputation: 16292

Angular:How to generate image gallery using bootstrap and ng-repeater

i am learning angular and try to know how could i produce image gallery like output with ng-repeater.

demo screenshot url http://designshack.co.uk/wp-content/uploads/copypastelist-4.jpg

see the image then can understand what kind of output i am after.

here is sample html by which we can generate image gallery.

CSS

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

html

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

html taken from https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

in each row there will be 5 images. now tell me how could i achieve the same effect with bootstrap css and angular ng-repeater. if possible please give me some sample code where with bootstrap and ng-repeater can be used to develop a gallery. thanks

Edit

suppose posting a sample code

var app=angular.module('imggallery',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {headline:'Headline1',source:'images/table.jpg'},
        {headline:'Headline2',source:'images/paper.jpg'},
        {headline:'Headline3',source:'images/computer.jpg'},
        {headline:'Headline4',source:'images/ac.jpg'},
        {headline:'Headline5',source:'images/sofa.jpg'}
    ];
});


<div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

suppose img array has 200 data along images path. i just do not understand how to use ng-repeat to show only five images in a row using normal html and css or using bootstrap.

so looking for some help. thanks

Upvotes: 0

Views: 1182

Answers (2)

JeanJacques
JeanJacques

Reputation: 1754

If you want to use Bootstrap to achieve this, you can use ngClass to apply, every five repeated element, the class :

col-xs-offset-1

This class create an offset of 1 col on the left side of your element.

Look a this plunker how I used it.

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Something like this,

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.images = ["https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"];
});
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
li{
  display:inline-block;
  width:20%;
  padding:10px;
}
li img{
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=myApp ng-controller=myCtrl>
  <ul>
    <li ng-repeat="j in images track by $index">
      <img src="{{j}}" />
    </li>
  </ul>
</div>

PS I'm using track by $index in ng-repeat just because $scope.images have duplicate values in it, you can remove it.

Upvotes: 1

Related Questions