Angular 11 – Angular Ngx-Lightbox

lightbox2 implementation port to use with new Angular without the need for jQuery.

Version

  • For Angular 5, 6, 7, please use ngx-lightbox 1.x.x. npm install ngx-lightbox@1.2.0
  • For Angular >= 8, please use ngx-lightbox 2.x.x. npm install ngx-lightbox@2.0.0
  • For Angular 2, 4, please use angular2-lightbox

1. Here is the command you need to run to install the lightbox module into your angular application:

npm i ngx-lightbox

2. Here is the code you need to add your angular.json file:

{
  "styles": [
    "node_modules/ngx-lightbox/lightbox.css",
    ...
  ],
}

3. Here is the code you need to add into your app.module.ts file:

import { LightboxModule } from 'ngx-lightbox';
 
@NgModule({
  imports: [ LightboxModule ]
})

4. Here is the code you need to add into your app.component.ts file:

import { Lightbox } from 'ngx-lightbox';
 
export class AppComponent {
  private _album: Array = [];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
      };
 
      this._album.push(album);
    }
  }
 
  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._album, index);
  }
 
  close(): void {
    // close lightbox programmatically
    this._lightbox.close();
  }
}

5. Here is the code you need to add into your app.component.html file:

<div *ngFor="let image of _album; let i=index">
  <img [src]="image.thumb" (click)="open(i)" />
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *