{"id":15067546,"url":"https://github.com/themyth92/ngx-lightbox","last_synced_at":"2025-04-04T11:12:42.125Z","repository":{"id":32418029,"uuid":"132988805","full_name":"themyth92/ngx-lightbox","owner":"themyth92","description":"Lightbox2 use with angular \u003e= 5","archived":false,"fork":false,"pushed_at":"2024-05-24T10:16:08.000Z","size":1963,"stargazers_count":115,"open_issues_count":68,"forks_count":70,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T08:15:56.137Z","etag":null,"topics":["angular5","angular6","angular7","angular8","lightbox2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themyth92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-11T04:22:28.000Z","updated_at":"2024-08-11T21:35:18.000Z","dependencies_parsed_at":"2024-06-18T12:41:52.485Z","dependency_job_id":"4aa43373-14c9-4c0c-940c-aed436983da8","html_url":"https://github.com/themyth92/ngx-lightbox","commit_stats":{"total_commits":65,"total_committers":20,"mean_commits":3.25,"dds":"0.49230769230769234","last_synced_commit":"07fdc0e6c52fe0e439a23b98c88c2cda7f55a37a"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fngx-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fngx-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fngx-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fngx-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themyth92","download_url":"https://codeload.github.com/themyth92/ngx-lightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243801604,"owners_count":20350105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular5","angular6","angular7","angular8","lightbox2"],"created_at":"2024-09-25T01:24:41.537Z","updated_at":"2025-03-21T08:09:15.274Z","avatar_url":"https://github.com/themyth92.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/themyth92/ngx-lightbox.svg?branch=master)](https://travis-ci.org/themyth92/ngx-lightbox)\n\n# Ngx-Lightbox\n\nA [lightbox2](https://github.com/lokesh/lightbox2) implementation port to use with new Angular without the need for jQuery\n\n## Version\n\n- For Angular 5, 6, 7, please use ngx-lightbox 1.x.x. `npm install ngx-lightbox@1.2.0`\n- For Angular \u003e= 8, please use ngx-lightbox 2.x.x. `npm install ngx-lightbox@2.0.0`\n- For Angular 2, 4, please use [angular2-lightbox](https://github.com/themyth92/angular2-lightbox)\n\n## [Demo](https://themyth92.com/project/ngx-lightbox)\n\n## Installation\n\n`npm install --save ngx-lightbox`\n\nUpdate your `angular.json`\n\n```\n{\n  \"styles\": [\n    \"./node_modules/ngx-lightbox/lightbox.css\",\n    ...\n  ],\n}\n```\n\n## Usage\n\n### Module:\n\nImport `LightboxModule` from `ngx-lightbox`\n\n```javascript\nimport { LightboxModule } from 'ngx-lightbox';\n\n@NgModule({\n  imports: [ LightboxModule ]\n})\n```\n\n### Component\n\n1. Markup\n\n```html\n\u003cdiv *ngFor=\"let image of _albums; let i=index\"\u003e\n  \u003cimg [src]=\"image.thumb\" (click)=\"open(i)\" /\u003e\n\u003c/div\u003e\n```\n\n2. Component method\n\n```javascript\nimport { Lightbox } from 'ngx-lightbox';\n\nexport class AppComponent {\n  private _album: Array = [];\n  constructor(private _lightbox: Lightbox) {\n    for (let i = 1; i \u003c= 4; i++) {\n      const src = 'demo/img/image' + i + '.jpg';\n      const caption = 'Image ' + i + ' caption here';\n      const thumb = 'demo/img/image' + i + '-thumb.jpg';\n      const album = {\n         src: src,\n         caption: caption,\n         thumb: thumb\n      };\n\n      this._albums.push(album);\n    }\n  }\n\n  open(index: number): void {\n    // open lightbox\n    this._lightbox.open(this._albums, index);\n  }\n\n  close(): void {\n    // close lightbox programmatically\n    this._lightbox.close();\n  }\n}\n\n```\n\nEach `object` of `album` array inside your component may contains 3 properties :\n\n| Properties | Requirement | Description                                                                                                        |\n| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |\n| src        | Required    | The source image to your thumbnail that you want to with use lightbox when user click on `thumbnail` image         |\n| caption    | Optional    | Your caption corresponding with your image                                                                         |\n| thumb      | Optional    | Source of your thumbnail. It is being used inside your component markup so this properties depends on your naming. |\n\n3. Listen to lightbox event\n\nYou can listen to 3 events, which are either **CHANGE_PAGE**, **CLOSE** or **OPEN**.\n\n```javascript\nimport { LightboxEvent, LIGHTBOX_EVENT } from 'ngx-lightbox';\nimport { Subscription } from 'rxjs';\n\nexport class AppComponent {\n  private _subscription: Subscription;\n  constructor(private _lightboxEvent: LightboxEvent) {}\n  open(index: number): void {\n    // register your subscription and callback whe open lightbox is fired\n    this._subscription = this._lightboxEvent.lightboxEvent$\n      .subscribe(event =\u003e this._onReceivedEvent(event));\n  }\n\n  private _onReceivedEvent(event: any): void {\n    // remember to unsubscribe the event when lightbox is closed\n    if (event.id === LIGHTBOX_EVENT.CLOSE) {\n      // event CLOSED is fired\n      this._subscription.unsubscribe();\n    }\n\n    if (event.id === LIGHTBOX_EVENT.OPEN) {\n      // event OPEN is fired\n    }\n\n    if (event.id === LIGHTBOX_EVENT.CHANGE_PAGE) {\n      // event change page is fired\n      console.log(event.data); // -\u003e image index that lightbox is switched to\n    }\n  }\n}\n```\n\n## Lightbox options\n\nAvailable options based on lightbox2 options\n\n| Properties                  | Default          | Description                                                                                                                                                                                                                                 |\n| --------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| fadeDuration                | **0.7** seconds  | _duration_ starting when the **src** image is **loaded** to **fully appear** onto screen.                                                                                                                                                   |\n| 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**.                                                                         |\n| 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. |\n| positionFromTop             | **20** px        | The position of lightbox from the top of window browser                                                                                                                                                                                     |\n| showImageNumberLabel        | **false**        | Determine whether to show the image number to user. The default text shown is `Image IMAGE_NUMBER of ALBUM_LENGTH`                                                                                                                          |\n| alwaysShowNavOnTouchDevices | **false**        | Determine whether to show `left/right` arrow to user on Touch devices.                                                                                                                                                                      |\n| 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.                                                                                           |\n| disableKeyboardNav          | **false**        | Determine whether to disable navigation using keyboard event.                                                                                                                                                                               |\n| disableScrolling            | **false**        | If **true**, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body.                                                                                                                    |\n| centerVertically            | **false**        | If **true**, images will be centered vertically to the screen.                                                                                                                                                                              |\n| 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.                                                                                  |\n| enableTransition            | **true**         | Transition animation between images will be disabled if this flag set to **false**                                                                                                                                                          |\n| showZoom            | **false**         | Zoom Buttons will be shown if this flag set to **true**                                                                                                                                                          |\n| showRotate            | **false**         | Rotate Buttons will be shown if this flag set to **true**                                                                                                                                                                                                    |\n| showDownloadButton  | **false**         | Download button will be shown if this flag set to **true**    |\n| containerElementResolver | () =\u003e document.body | Resolves the element that will contain the lightbox | \n\n\n**NOTE**: You can either override default config or during a specific opening window\n\n1. Override default config\n\n```javascript\nimport { LightboxConfig } from 'ngx-lightbox';\n\nexport class AppComponent {\n  constructor(private _lightboxConfig: LightboxConfig) {\n    // override default config\n    _lightboxConfig.fadeDuration = 1;\n  }\n}\n```\n\n2. Set config in a specific opening window\n\n```javascript\nimport { LightboxConfig, Lightbox } from 'ngx-lightbox';\n\nexport class AppComponent {\n  constructor(private _lightboxConfig: LightboxConfig, private _lightbox: Lightbox) {}\n  open(index: number) {\n    // override the default config on second parameter\n    this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });\n  }\n}\n```\n\n### Overriding lightbox parent elements\n\nIf you want to use any other parent element than your `\u003cbody\u003e`, please override the `containerElementResolver` property of your `LightboxConfig`.\nThis can be used, e.g. if you are opening the lightbox from within a Shadow DOM based web component.\n\n```js\nexport class MyLightBoxTrigger {\n  constructor(\n    private _lightbox: Lightbox,\n    private _lighboxConfig: LightboxConfig,\n  ) {\n    _lighboxConfig.containerElementResolver = (doc: Document) =\u003e doc.getElementById('my-lightbox-host');\n  }\n\n  open(index: number): void {\n    this._lightbox.open(this.images, index); // will put the lightbox child into e.g. \u003cdiv id=\"my-lightbox-host\"\u003e\u003c/div\u003e\n  }\n```\n\n## Angular Universal\n\nThis project works with universal out of the box with no additional configuration.\n\n## License\n\nMIT\n\n## Donation\n\nBuy me a beer if you like\n\nBTC: 1MFx5waJ7Sitn961DaXe3mQXrb7pEoSJct\n\nETH: 0x2211F3d683eB1C2d753aD21D9Bd9110729C80B72\n\nNEO: ARrUrnbq1ogfsoabvCgJ5SHgknhzyUmtuS\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemyth92%2Fngx-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemyth92%2Fngx-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemyth92%2Fngx-lightbox/lists"}