How to create an image grid without the lightbox on click

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>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=58931" target="_blank" rel="nofollow">@anuragd7</a></p>

<p>Please take a look at the below code:
.html:</p>

</div>

</div>
  </div>
</div>
</code></pre>

<pre class="prettyprint"><code>imageArray: string[] = [];

saveToArray(imageSource: string) {
    if (!this.imageArray.find((image: string) => image === imageSource)) {
      this.imageArray.push(imageSource);
    }
    console.log(this.imageArray);
  }
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

anuragd7

120Support score
18Questions 3Answers 0Snippets