Angular Bootstrap LightBox

Angular lightbox - Bootstrap 4 & Material Design

Angular Bootstrap lightbox is a group of images combined in one responsive gallery. Elements are grouped in thumbnail grid, which can be displayed as a slideshow.

Basic example MDB Pro component 



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

      

          import { Component } from '@angular/core';

          @Component({
            selector: 'basic-lightbox',
            templateUrl: './basic-lightbox.component.html',
            styleUrls: ['./basic-lightbox.component.scss'],
          })
          export class BasicLightboxComponent {
            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' }
          ];
        }

Angular Lightbox - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of lightbox component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

// For MDB Angular Pro
import { LightBoxModule, WavesModule } from 'ng-uikit-pro-standard'
Import example Modules list

Components

ImageModalComponent

Selector: mdb-image-modal

Type: ImageModalComponent

Inputs

Name Type Default Description Example
modalImages [{img: string, thumb: string, description: string, caption: string}] - Input for filling lightbox with images. [modalImages]="images"
type string - Input changing type of the lightbox. Possible values are margin, no-margin. type="no-margin"

Methods

Below methods are available in ImageModalComponent

Name Description
prevImage() Navigates to the previous image in the lightbox view.
nextImage() Navigates to the next image in the lightbox view.