Topic: How to create an image grid without the lightbox on click

anuragd7 free asked 5 years ago


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>

Damian Gemza staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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