Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-lightbox

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-lightbox

A port >= angular5 for lightbox2

  • 3.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17K
decreased by-14.4%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status

Ngx-Lightbox

A 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

Demo

Installation

npm install --save ngx-lightbox

Update your angular.json

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

Usage

Module:

Import LightboxModule from ngx-lightbox

import { LightboxModule } from 'ngx-lightbox';

@NgModule({
  imports: [ LightboxModule ]
})

Component

  1. Markup
<div *ngFor="let image of _albums; let i=index">
  <img [src]="image.thumb" (click)="open(i)" />
</div>
  1. Component method
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._albums.push(album);
    }
  }

  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._albums, index);
  }

  close(): void {
    // close lightbox programmatically
    this._lightbox.close();
  }
}

Each object of album array inside your component may contains 3 properties :

PropertiesRequirementDescription
srcRequiredThe source image to your thumbnail that you want to with use lightbox when user click on thumbnail image
captionOptionalYour caption corresponding with your image
thumbOptionalSource of your thumbnail. It is being used inside your component markup so this properties depends on your naming.
  1. Listen to lightbox event

You can listen to 3 events, which are either CHANGE_PAGE, CLOSE or OPEN.

import { LightboxEvent, LIGHTBOX_EVENT } from 'ngx-lightbox';
import { Subscription } from 'rxjs';

export class AppComponent {
  private _subscription: Subscription;
  constructor(private _lightboxEvent: LightboxEvent) {}
  open(index: number): void {
    // register your subscription and callback whe open lightbox is fired
    this._subscription = this._lightboxEvent.lightboxEvent$
      .subscribe(event => this._onReceivedEvent(event));
  }

  private _onReceivedEvent(event: any): void {
    // remember to unsubscribe the event when lightbox is closed
    if (event.id === LIGHTBOX_EVENT.CLOSE) {
      // event CLOSED is fired
      this._subscription.unsubscribe();
    }

    if (event.id === LIGHTBOX_EVENT.OPEN) {
      // event OPEN is fired
    }

    if (event.id === LIGHTBOX_EVENT.CHANGE_PAGE) {
      // event change page is fired
      console.log(event.data); // -> image index that lightbox is switched to
    }
  }
}

Lightbox options

Available options based on lightbox2 options

PropertiesDefaultDescription
fadeDuration0.7 secondsduration starting when the src image is loaded to fully appear onto screen.
resizeDuration0.5 secondsduration starting when Lightbox container change its dimension from a default/previous image to the current image when the current image is loaded.
fitImageInViewPorttrueDetermine whether lightbox will use the natural image width/height or change the image width/height to fit the view of current window. Change this option to true to prevent problem when image too big compare to browser windows.
positionFromTop20 pxThe position of lightbox from the top of window browser
showImageNumberLabelfalseDetermine whether to show the image number to user. The default text shown is Image IMAGE_NUMBER of ALBUM_LENGTH
alwaysShowNavOnTouchDevicesfalseDetermine whether to show left/right arrow to user on Touch devices.
wrapAroundfalseDetermine whether to move to the start of the album when user reaches the end of album and vice versa. Set it to true to enable this feature.
disableKeyboardNavfalseDetermine whether to disable navigation using keyboard event.
disableScrollingfalseIf true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body.
centerVerticallyfalseIf true, images will be centered vertically to the screen.
albumLabel"Image %1 of %2"The text displayed below the caption when viewing an image set. The default text shows the current image number and the total number of images in the set.
enableTransitiontrueTransition animation between images will be disabled if this flag set to false
showZoomfalseZoom Buttons will be shown if this flag set to true
showRotatefalseRotate Buttons will be shown if this flag set to true
showDownloadButtonfalseDownload button will be shown if this flag set to true
containerElementResolver() => document.bodyResolves the element that will contain the lightbox

NOTE: You can either override default config or during a specific opening window

  1. Override default config
import { LightboxConfig } from 'ngx-lightbox';

export class AppComponent {
  constructor(private _lightboxConfig: LightboxConfig) {
    // override default config
    _lightboxConfig.fadeDuration = 1;
  }
}
  1. Set config in a specific opening window
import { LightboxConfig, Lightbox } from 'ngx-lightbox';

export class AppComponent {
  constructor(private _lightboxConfig: LightboxConfig, private _lightbox: Lightbox) {}
  open(index: number) {
    // override the default config on second parameter
    this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });
  }
}

Overriding lightbox parent elements

If you want to use any other parent element than your <body>, please override the containerElementResolver property of your LightboxConfig. This can be used, e.g. if you are opening the lightbox from within a Shadow DOM based web component.

export class MyLightBoxTrigger {
  constructor(
    private _lightbox: Lightbox,
    private _lighboxConfig: LightboxConfig,
  ) {
    _lighboxConfig.containerElementResolver = (doc: Document) => doc.getElementById('my-lightbox-host');
  }

  open(index: number): void {
    this._lightbox.open(this.images, index); // will put the lightbox child into e.g. <div id="my-lightbox-host"></div>
  }

Angular Universal

This project works with universal out of the box with no additional configuration.

License

MIT

Donation

Buy me a beer if you like

BTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct

ETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72

NEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS

Keywords

FAQs

Package last updated on 24 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc