Angular Bootstrap Lightbox

Angular Lightbox - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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.