Angular2 Lightbox
A lighbox2 implementation port to use with Angular2 without the need for jQuery
This module works with angular 2.x and 4.x demo
NOTICE:
For angular >= 5 support. Please use ngx-lightbox.
Installation
npm install --save angular2-lightbox
Update your system.config.js
{
map: {
'angular2-lightbox': 'node_modules/angular2-lightbox'
},
packages: {
'angular2-lightbox': {
main: './index.js',
defaultExtension: 'js'
}
}
}Usage
CSS
Include modified version of lightbox.css in your index.html
<link rel="stylesheet" href="./node_modules/angular2-lightbox/lightbox.css">Module:
Import LightboxModule from angular2-lightbox
import { LightboxModule } from 'angular2-lightbox';
@NgModule({
imports: [ LightboxModule ]
})Component
- Markup
<div *ngFor="let image of _albums; let i=index">
<img [src]="image.thumb" (click)="open(i)"/>
</div>- Component method
import { Lightbox } from 'angular2-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);
}
}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. |
- Listen to lightbox event
You can listen to 3 events, which are either CHANGE_PAGE, CLOSE or OPEN.
import { LightboxEvent, LIGHTBOX_EVENT } from 'angular2-lightbox';
import { Subscription } from 'rxjs/Subscription';
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
- Override default config
import { LightboxConfig } from 'angular2-lightbox';
export class AppComponent {
constructor(private _lighboxConfig: LightboxConfig) {
// override default config
_lighboxConfig.fadeDuration = 1;
}
}- Set config in a specific opening window
import { LightboxConfig, Lightbox } from 'angular2-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