mdb-image-modal - how to set 3 images to 2 images in a row

 import { ImageModalComponent } from 'your_path'';
 @ViewChild('ImageModalComponent', { static: true }) ImageModalComponent: ImageModalComponent;
  imagesBasic = [
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg',
      description: 'Image 1',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg',
      description: 'Image 2',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg',
      description: 'Image 3',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg',
      description: 'Image 4',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg',
      description: 'Image 5',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg',
      description: 'Image 6',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg',
      description: 'Image 7',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg',
      description: 'Image 8',
    },
    {
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg',
      thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg',
      description: 'Image 9',
    },
  ];
  constructor(private renderer: Renderer2) {}
  ngAfterViewInit() {
    for (const child of this.ImageModalComponent.element.nativeElement.children) {
      for (const col of child.children) {
        if (!col.classList.contains('ng-gallery-content') && !col.classList.contains('top-bar')) {
          this.renderer.removeClass(col, 'col-md-4');

          this.renderer.addClass(col, 'col-md-6');
        }
      }
    }
  }

<div class="container">
  <div class="row">
    <mdb-image-modal
      #ImageModalComponent
      [modalImages]="imagesBasic"
      type="no-margin"
    ></mdb-image-modal>
  </div>
</div>

cjj2009 commented 5 years ago

Hi,

Thanks for you reply and I think it looks hard to me to solved this issue after I refer your code this time.

Regards, James

---

Bartosz Termena staff commented 5 years ago

Dear @cjj2009

I assure you that we will add the possibility to change the number of images in the column in the near future.

I will let you know about that.

Best Regards, Bartosz.

---

cjj2009 commented 5 years ago

Many thanks! James

---

cjj2009 commented 5 years ago

Hi, Would you like the tell me how to set below statement about 'your_path'? import { ImageModalComponent } from 'your_path'';

Thanks, James

---

Bartosz Termena staff commented 5 years ago

Hi!

Try import { ImageModalComponent } from 'ng-uikit-pro-standard';

Best Regards, Bartosz.

---

cjj2009 commented 5 years ago

Hi Bartosz,

It is working now for the 2 images in each row!

Many Thanks for you help! :)

Regards, James

---