Angular2 Lightbox

NOTICE:

Installation

{map:{'angular2-lightbox':'node_modules/angular2-lightbox'},packages:{'angular2-lightbox':{main:'./index.js',defaultExtension:'js'}}}

Usage

CSS

<linkrel="stylesheet"href="./node_modules/angular2-lightbox/lightbox.css">

Module:

import{LightboxModule}from'angular2-lightbox';@NgModule({imports:[LightboxModule]})

Component

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

import{Lightbox}from'angular2-lightbox';exportclassAppComponent{private_album:Array=[];constructor(private_lightbox:Lightbox){for(leti=1;i<=4;i++){constsrc='demo/img/image'+i+'.jpg';constcaption='Image '+i+' caption here';constthumb='demo/img/image'+i+'-thumb.jpg';constalbum={src:src,caption:caption,thumb:thumb};this._albums.push(album);}}open(index:number):void{// open lightboxthis._lightbox.open(this._albums,index);}}

import{LightboxEvent,LIGHTBOX_EVENT}from'angular2-lightbox';import{Subscription}from'rxjs/Subscription';exportclassAppComponent{private_subscription:Subscription;constructor(private_lightboxEvent:LightboxEvent){}open(index:number):void{// register your subscription and callback whe open lightbox is firedthis._subscription=this._lightboxEvent.lightboxEvent$.subscribe(event=>this._onReceivedEvent(event));}private_onReceivedEvent(event:any):void{// remember to unsubscribe the event when lightbox is closedif(event.id===LIGHTBOX_EVENT.CLOSE){// event CLOSED is firedthis._subscription.unsubscribe();}if(event.id===LIGHTBOX_EVENT.OPEN){// event OPEN is fired}if(event.id===LIGHTBOX_EVENT.CHANGE_PAGE){// event change page is firedconsole.log(event.data);// -> image index that lightbox is switched to}}}

Lightbox options

import{LightboxConfig}from'angular2-lightbox';exportclassAppComponent{constructor(private_lighboxConfig:LightboxConfig){// override default config_lighboxConfig.fadeDuration=1;}}

import{LightboxConfig,Lightbox}from'angular2-lightbox';exportclassAppComponent{constructor(private_lighboxConfig:LightboxConfig,private_lightbox:Lightbox){}open(index:number){// override the default config on second parameterthis._lightbox.open(this._albums,index,{wrapAround:true,showImageNumberLabel:true});}}

License

Donation