Topic: How to create an image grid without the lightbox on click
I am looking to create an image grid just like the one shown in the lightbox example hereHowever I don't want to show the expanded image on click. Instead I want to capture the image that has been clicked save it to an array. Any examples on how this can be achieved.
I have tried setting up a grid and images inside the same but it does not look as good as the gallery
<div class="row">
<div
*ngFor="let image of searchImageResult"
class="col-md-2 col-sm-3 col-xs-6 d-flex justify-content-center"
>
<div class="img-container">
<img
[src]="image.thumb"
alt=""
class="img-thumbnail"
(click)="searchPreview($event)"
[ngClass]="{ 'img-selected': image.selected }"
/>
</div>
</div>
</div>
Dear @anuragd7
Please take a look at the below code: .html:
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto my-5">
<div class="row">
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg"
alt="video" data-toggle="modal" data-target="#modal1"></a>
</div>
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg"
alt="video" data-toggle="modal" data-target="#modal6"></a>
</div>
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg"
alt="video" data-toggle="modal" data-target="#modal4"></a>
</div>
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-4.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-4.jpg"
alt="video" data-toggle="modal" data-target="#modal2"></a>
</div>
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-5.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-5.jpg"
alt="video" data-toggle="modal" data-target="#modal5"></a>
</div>
<div class="col-md-4 mx-auto my-5">
<a><img class="img-fluid z-depth-1"
(click)="saveToArray('https://mdbootstrap.com/img/screens/yt/screen-video-6.jpg')"
src="https://mdbootstrap.com/img/screens/yt/screen-video-6.jpg"
alt="video" data-toggle="modal" data-target="#modal3"></a>
</div>
</div>
</div>
</div>
</div>
.ts:
imageArray: string[] = [];
saveToArray(imageSource: string) {
if (!this.imageArray.find((image: string) => image === imageSource)) {
this.imageArray.push(imageSource);
}
console.log(this.imageArray);
}
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.1
- Device: mac
- Browser: chrome
- OS: OSX
- Provided sample code: No
- Provided link: Yes