Lightbox

Angular Bootstrap 5 Lightbox component

Responsive lightbox built with ootstrap 5, Angular 11 and Material Design 2.0. Lightbox is a responsive gallery with the option to enlarge selected photos.

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

Note: Read the API tab to find all available options and advanced customization


Basic example

A basic example of a lightbox with the most common use case with the bootstrap grid.


Image optimization

To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the img input add the path to the image with higher resolution. If the img input is omitted, the lightbox will display the same image as in the reduced size.


Shadows and rounded corners

You can improve the look of the images by adding shadows and rounded corners.


Different sizes

Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.


Zoom level

The zoomLevel input allows you to define the size of a single zoom in / zoom out.


Disabled image

By adding a lightbox-disabled class to any image, you can exclude it from your lightbox. In the example below, the third image has been disabled.


Captions

Image captions can be added using the caption input. If it is not set, the data is taken from the alt attribute. When you want to disable caption, leave the caption empty.


Outside access

The lightbox can be successfully operated via TypeScript. There are many public methods available such as open, slide, zoomIn, zoomOut, or close. All are described in the API tab.

Lightbox - API


Import


        import { MdbLightboxModule } from 'mdb-angular-ui-kit/lightbox';
        …
        @NgModule ({
          ...
          imports: [MdbLightboxModule],
          ...
        })
      

Inputs

Name Type Default Description
zoomLevel number 1 Defines zoom level while zooming in or out.
fontAwesome string 'free' Defines version of Font Awesome library. Available options are 'free' and 'pro'.
img string Defines regular image to load when gallery is open. If not set, the value of src attribute is taken.
caption string Defines caption of the image. If not set, the value of alt attribute is taken.

Methods

Name Parameters Description
open target Opens the gallery and activates image set by the target key. Default is the first image.
slide target Slides an image in the gallery. Available options: left, right, first, last. Dafault is right direction.
zoomIn Zooms in active image by one level.
zoomOut Zooms out active image by one level.
toggleFullscreen Toggles fullscreen.
reset Resets changed parameters such as position, zoom or fullscreen.
close Closes the gallery.

        <mdb-lightbox #lightbox class="lightbox">
          <div class="row">
            <div class="col-lg-4">
              <img
                mdbLightboxItem
                src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                [img]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.jpg'"
                alt="Lightbox image 1"
                class="w-100"
              />
            </div>
          </div>
        </mdb-lightbox>
      

        @ViewChild('lightbox') select: MdbLightboxComponent;

        ngAfterViewInit(): void {
          this.lightbox.open();
        }
      

Outputs

Name Description
lightboxOpen Emitted when a lightbox has been toggled.
lightboxOpened Emitted when a lightbox is opened.
lightboxSlide Emitted when a lightbox has been slided.
lightboxSlided Emitted after an image slide.
lightboxZoomIn Emitted when an image has been zoom in.
lightboxZoomedIn Emitted after an image is zoomed in.
lightboxZoomOut Emitted when an image has been zoom out.
lightboxZoomedOut Emitted after an image is zoomed out.
lightboxClose Emitted when a lightbox has been toggled.
lightboxClosed Emitted when a lightbox is closed.

        <mdb-lightbox (opened)="onLightboxOpened()" class="lightbox">
          <div class="row">
            <div class="col-lg-4">
              <img
                mdbLightboxItem
                src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg"
                [img]="'https://mdbcdn.b-cdn.net/img/Photos/Slides/1.jpg'"
                alt="Lightbox image 1"
                class="w-100"
              />
            </div>
          </div>
        </mdb-lightbox>
      

        onLightboxOpened() { console.log('Lightbox open'); }