Bootstrap lightbox Premium component

Advanced LightBox component which let you create a stunning and responsive gallery.

Basic example

<div class="row">
    <ImageModal [modalImages]="imagesBasic" type="no-margin"></ImageModal>
</div>
        

Data structure:

export class AppComponent {

    imagesBasic = [
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(111).jpg', thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(111).jpg', description: 'Image 1' },
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(112).jpg', description: 'Image 2' },
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(66).jpg', description: 'Image 3' },
    ];

}
        

Gallery with margins Premium component

Instead of type="no-margin" add type="margin" to the ImageModal tag.

<div class="row">
    <ImageModal [modalImages]="images" type="margin"></ImageModal>
</div>
        

Data structure:

export class AppComponent {

    images = [
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg', thumb: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(114).jpg', description: 'Image 11' },
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(42).jpg', description: 'Image 12' },
      { img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(43).jpg', description: 'Image 13' },
    ];

}