ngx-lightbox - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #go #golang #android #machine-learning #rust #nodejs #java #vue #pytorch #open-source

ngx-lightbox

(★ 114)

Lightbox2 use with angular >= 5

파일 탐색기

최종 버전 다운로드 (.zip)

- - image1-thumb.jpg
  - image1.jpg
  - image2-thumb.jpg
  - image2.jpg
  - image3-thumb.jpg
  - image3.jpg
  - image4-thumb.jpg
  - image4.jpg
- app.component.ts
- app.css
- app.module.ts
- main.ts
- polyfills.ts
- index.ts
- lightbox-config.service.ts
- lightbox-event.service.ts
- lightbox-overlay.component.spec.ts
- lightbox-overlay.component.ts
- lightbox.component.spec.ts
- lightbox.component.ts
- lightbox.css
- lightbox.module.ts
- lightbox.service.ts
.gitignore
.npmignore
.travis.yml
angular.json
index.html
karma-main.js
karma.conf.js
LICENSE
package.json
README.md
tsconfig-demo.json
tsconfig.json
tslint.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/themyth92/ngx-lightbox

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-lightbox

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Build Status](https://travis-ci.org/themyth92/ngx-lightbox.svg?branch=master)](https://travis-ci.org/themyth92/ngx-lightbox)

# Ngx-Lightbox

A [lightbox2](https://github.com/lokesh/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](https://github.com/themyth92/angular2-lightbox)

## [Demo](https://themyth92.com/project/ngx-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`

```javascript
import { LightboxModule } from 'ngx-lightbox';

@NgModule({
  imports: [ LightboxModule ]
})
```

### Component

1. Markup

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

2. Component method

```javascript
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. |

3. Listen to lightbox event

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

```javascript
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.                                                                                                                                                                              |
| 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.                                                                                  |
| enableTransition            | **true**         | Transition animation between images will be disabled if this flag set to **false**                                                                                                                                                          |
| showZoom            | **false**         | Zoom Buttons will be shown if this flag set to **true**                                                                                                                                                          |
| showRotate            | **false**         | Rotate Buttons will be shown if this flag set to **true**                                                                                                                                                                                                    |
| showDownloadButton  | **false**         | Download button will be shown if this flag set to **true**    |
| containerElementResolver | () => document.body | Resolves the element that will contain the lightbox |

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

1. Override default config

```javascript
import { LightboxConfig } from 'ngx-lightbox';

export class AppComponent {
  constructor(private _lightboxConfig: LightboxConfig) {
    // override default config
    _lightboxConfig.fadeDuration = 1;
  }
}
```

2. Set config in a specific opening window

```javascript
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.

```js
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