npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

custom-ngx-lightbox

v1.1.1

Published

A port >= angular5 for lightbox2, fork from ngx-lightbox

Downloads

9

Readme

Build Status

Ngx-Lightbox

A lighbox2 implementation port to use with new Angular without the need for jQuery

This module works with angular >= 5 demo. For angular 2x or 4x, please use angular2-lightbox

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 :

Properties | Requirement | Description ----------|-------------|------------ src | Required | The source image to your thumbnail that you want to with use lightbox when user click on thumbnail image caption | Optional | Your caption corresponding with your image thumb | Optional | Source 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

Properties | Default | Description -----------|---------|------------ fadeDuration | 0.7 seconds | duration starting when the src image is loaded to fully appear onto screen. resizeDuration | 0.5 seconds | duration starting when Lightbox container change its dimension from a default/previous image to the current image when the current image is loaded. fitImageInViewPort | true | Determine 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. positionFromTop | 20 px | The position of lightbox from the top of window browser showImageNumberLabel | false | Determine whether to show the image number to user. The default text shown is Image IMAGE_NUMBER of ALBUM_LENGTH alwaysShowNavOnTouchDevices | false | Determine whether to show left/right arrow to user on Touch devices. wrapAround | false | Determine 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. disableKeyboardNav | false | Determine whether to disable navigation using keyboard event. disableScrolling | false | If true, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body. centerVertically | false | If true, images will be centered vertically to the screen.

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 _lighboxConfig: LightboxConfig) {
    // override default config
    _lighboxConfig.fadeDuration = 1;
  }
}
  1. Set config in a specific opening window
import { LightboxConfig, Lightbox } from 'ngx-lightbox';

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

License

MIT

Donation

Buy me a beer if you like

BTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct

ETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72

NEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS