{"id":13497214,"url":"https://github.com/themyth92/angular2-lightbox","last_synced_at":"2025-03-26T21:32:30.965Z","repository":{"id":43478888,"uuid":"81180044","full_name":"themyth92/angular2-lightbox","owner":"themyth92","description":"Lightbox2 port to use with angular2","archived":false,"fork":false,"pushed_at":"2019-05-02T03:06:18.000Z","size":967,"stargazers_count":32,"open_issues_count":9,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-19T03:06:56.403Z","etag":null,"topics":["angular2","lightbox2","photo-gallery"],"latest_commit_sha":null,"homepage":null,"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}},"created_at":"2017-02-07T07:33:47.000Z","updated_at":"2024-09-09T16:15:53.000Z","dependencies_parsed_at":"2022-09-14T03:30:48.782Z","dependency_job_id":null,"html_url":"https://github.com/themyth92/angular2-lightbox","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fangular2-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fangular2-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fangular2-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themyth92%2Fangular2-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themyth92","download_url":"https://codeload.github.com/themyth92/angular2-lightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245738951,"owners_count":20664374,"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":["angular2","lightbox2","photo-gallery"],"created_at":"2024-07-31T20:00:26.800Z","updated_at":"2025-03-26T21:32:25.947Z","avatar_url":"https://github.com/themyth92.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"[![Build Status](https://travis-ci.org/themyth92/angular2-lightbox.svg?branch=master)](https://travis-ci.org/themyth92/angular2-lightbox)\n\n# Angular2 Lightbox\nA [lighbox2](https://github.com/lokesh/lightbox2) implementation port to use with Angular2 without the need for jQuery\n\nThis module works with angular 2.x and 4.x\n[demo](https://themyth92.com/project/angular2-lightbox/)\n\n## NOTICE:\nFor angular \u003e= 5 support. Please use [ngx-lightbox](https://github.com/themyth92/ngx-lightbox).\n\n## Installation\n`npm install --save angular2-lightbox`\n\nUpdate your `system.config.js`\n\n```javascript\n{\n  map: {\n    'angular2-lightbox': 'node_modules/angular2-lightbox'\n  },\n  packages: {\n    'angular2-lightbox': {\n      main: './index.js',\n      defaultExtension: 'js'\n    }\n  }\n}\n```\n\n## Usage\n### CSS\nInclude modified version of `lightbox.css` in your `index.html`\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./node_modules/angular2-lightbox/lightbox.css\"\u003e\n```\n\n### Module:\nImport `LightboxModule` from `angular2-lightbox`\n\n```javascript\nimport { LightboxModule } from 'angular2-lightbox';\n\n@NgModule({\n  imports: [ LightboxModule ]\n})\n```\n\n### Component\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 'angular2-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\n```\n\nEach `object` of `album` array inside your component may contains 3 properties :\n\nProperties | Requirement | Description\n----------|-------------|------------\nsrc | Required | The source image to your thumbnail that you want to with use lightbox when user click on `thumbnail` image\ncaption | Optional | Your caption corresponding with your image \nthumb | 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 'angular2-lightbox';\nimport { Subscription } from 'rxjs/Subscription';\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\nProperties | Default | Description\n-----------|---------|------------\nfadeDuration | **0.7** seconds | *duration* starting when the **src** image is **loaded** to **fully appear** onto screen.\nresizeDuration | **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**.\nfitImageInViewPort | **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.\npositionFromTop | **20** px | The position of lightbox from the top of window browser\nshowImageNumberLabel | **false** | Determine whether to show the image number to user. The default text shown is `Image IMAGE_NUMBER of ALBUM_LENGTH`\nalwaysShowNavOnTouchDevices | **false** | Determine whether to show `left/right` arrow to user on Touch devices.\nwrapAround | **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.\ndisableKeyboardNav | **false** | Determine whether to disable navigation using keyboard event.\ndisableScrolling | **false** | If **true**, prevent the page from scrolling while Lightbox is open. This works by settings overflow hidden on the body.\ncenterVertically | **false** | If **true**, images will be centered vertically to the screen.\n\n**NOTE**: You can either override default config or during a specific opening window\n1. Override default config\n```javascript\nimport { LightboxConfig } from 'angular2-lightbox';\n\nexport class AppComponent {\n  constructor(private _lighboxConfig: LightboxConfig) {\n    // override default config\n    _lighboxConfig.fadeDuration = 1;\n  }\n}\n```\n\n2. Set config in a specific opening window\n```javascript\nimport { LightboxConfig, Lightbox } from 'angular2-lightbox';\n\nexport class AppComponent {\n  constructor(private _lighboxConfig: 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## License\n\nMIT\n\n## Donation\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%2Fangular2-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemyth92%2Fangular2-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemyth92%2Fangular2-lightbox/lists"}