1
Reply

Angular:How to generate image gallery using bootstrap and ng

tri_inn

tri_inn

Apr 27 2017 9:43 AM
318
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
  1. * {margin: 0; padding: 0;}  
  2.   
  3. div {  
  4. margin: 20px;  
  5. }  
  6.   
  7. ul {  
  8. list-style-type: none;  
  9. width: 500px;  
  10. }  
  11.   
  12. h3 {  
  13. font: bold 20px/1.5 Helvetica, Verdana, sans-serif;  
  14. }  
  15.   
  16. li img {  
  17. float: left;  
  18. margin: 0 15px 0 0;  
  19. }  
  20.   
  21. li p {  
  22. font: 200 12px/1.5 Georgia, Times New Roman, serif;  
  23. }  
  24.   
  25. li {  
  26. padding: 10px;  
  27. overflow: auto;  
  28. }  
  29.   
  30. li:hover {  
  31. background: #eee;  
  32. cursor: pointer;  


html
  1. <div>  
  2. <ul>  
  3. <li>  
  4. <img src="http://lorempixum.com/100/100/nature/1" />  
  5. <h3>Headline</h3>  
  6. <p>Lorem ipsum dolor sit amet...</p>  
  7. </li>  
  8.   
  9. <li>  
  10. <img src="http://lorempixum.com/100/100/nature/2" />  
  11. <h3>Headline</h3>  
  12. <p>Lorem ipsum dolor sit amet...</p>  
  13. </li>  
  14.   
  15. <li>  
  16. <img src="http://lorempixum.com/100/100/nature/3" />  
  17. <h3>Headline</h3>  
  18. <p>Lorem ipsum dolor sit amet...</p>  
  19. </li>  
  20.   
  21. <li>  
  22. <img src="http://lorempixum.com/100/100/nature/4" />  
  23. <h3>Headline</h3>  
  24. <p>Lorem ipsum dolor sit amet...</p>  
  25. </li>  
  26. </ul>  
  27. </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
  1. var app=angular.module('imggallery',[]);  
  2. app.controller('imageCtrl',function($scope){  
  3. $scope.img=[  
  4. {headline:'Headline1',source:'images/table.jpg'},  
  5. {headline:'Headline2',source:'images/paper.jpg'},  
  6. {headline:'Headline3',source:'images/computer.jpg'},  
  7. {headline:'Headline4',source:'images/ac.jpg'},  
  8. {headline:'Headline5',source:'images/sofa.jpg'}  
  9. ];  
  10. });  
  11.   
  12.   
  13. <div ng-repeat="x in img">  
  14. <img ng-src="{{x.source}}" >  
  15. </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

Answers (1)