Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
1
Reply
Angular:How to generate image gallery using bootstrap and ng
tri_inn
Apr 27 2017 9:43 AM
315
Reply
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
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
1
)
Next Recommended Forum
How to handle dates in url when doing routing in angular
Child node not binding in HTML template angular 2 tree view