Angular Bootstrap Lightbox

Angular Lightbox - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Required screenfull library

Using lightbox requires you to have installed the Screenfull library. Install it using the following command, and then add it to your imports in angular.json. This process is described in Quickstart Guide. 

        
            
          npm install --save screenfull@4.2.1
Live example

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).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).webp", description: "Image 1" },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).webp", description: "Image 2" },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).webp", description: "Image 3" },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).webp", description: "Image 4" },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).webp", description: 'Image 5' },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).webp", description: 'Image 6' },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).webp", description: 'Image 7' },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).webp", description: 'Image 8' },
                  { img: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp", thumb: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).webp", 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. 

        
            
          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.