Example for use of angular2-lightbox

gallery.component.ts

import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {ImgurService} from './imgur.service';
import {GalleryImage} from './gallery-image';
import {Lightbox, LIGHTBOX_EVENT, LightboxEvent, LightboxConfig} from 'angular2-lightbox';
import {Subscription} from 'rxjs/Rx';
import {NavigationStart, Router} from '@angular/router';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent implements OnInit, OnDestroy {

  @ViewChild('galleryWrapper') galleryWrapper;

  mainContentCssClass: string;
  images: GalleryImage[];

  private lightboxSubscription: Subscription;

  constructor(private router: Router,
              private imgurService: ImgurService,
              private lightbox: Lightbox,
              private lighboxConfig: LightboxConfig,
              private lightboxEvent: LightboxEvent) {

    this.lighboxConfig.alwaysShowNavOnTouchDevices = true;
    this.lighboxConfig.wrapAround = true;
    this.lighboxConfig.fitImageInViewPort = true;

    router.events
      .filter(event => event instanceof NavigationStart)
      .subscribe(event => {
        this.closeLightBox();
        this.enableBodyScroll();
      });
  }

  ngOnInit() {
    this.fetchImages();
  }

  private fetchImages() {
    console.log('fetching images');
    this.imgurService.getGalleryImages()
      .subscribe(
        result => {
          this.images = result.reverse();
        },
        error => {
            console.log(error);
        },
        () => console.log('done')
      );
  }

  openImage(index: number): void {
    this.lightboxSubscription = this.lightboxEvent.lightboxEvent$
      .subscribe(event => this.onReceivedEvent(event));

    // top of gallery + vertical scroll position
    const lightboxTop = this.galleryWrapper.nativeElement.offsetTop + window.scrollY;

    this.lightbox.open(this.images, index, { positionFromTop: lightboxTop });
  }

  closeLightBox() {
    this.lightboxEvent.broadcastLightboxEvent({ id: LIGHTBOX_EVENT.CLOSE, data: null });
  }

  private onReceivedEvent(event: any): void {
    if (event.id === LIGHTBOX_EVENT.CLOSE) {
      // event CLOSED is fired
      console.log('close event - disabling body scroll');
      this.lightboxSubscription.unsubscribe();
      this.lightboxSubscription = null;
      this.enableBodyScroll();
    }

    if (event.toString() === '3'  /* LIGHTBOX_EVENT.OPEN */) {
      // event OPEN is fired
      console.log('open event - disabling body scroll');
      this.disableBodyScroll();
    }
  }

  ngOnDestroy() {
    if (this.lightboxSubscription) {
      this.lightboxSubscription.unsubscribe();
      this.lightboxSubscription = null;
      this.enableBodyScroll();
    }
  }

  private disableBodyScroll() {
    document.body.classList.toggle('noscroll', true);
  }

  private enableBodyScroll() {
    document.body.classList.toggle('noscroll', false);
  }
}