web
mobile
Edit these docs Rate these docs

Angular Bootstrap LightBox

Angular lightbox - Bootstrap 4 & Material Design

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@3.3.0
  

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' }
          ];
        }
      




Edit these docs Rate these docs

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'

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.