-
Notifications
You must be signed in to change notification settings - Fork 126
Lightbox Usage
Murhaf Sousli edited this page Feb 13, 2018
·
27 revisions
-
Make sure
@ngx-gallery/core
is installed -
Install it with npm or yarn
npm install --save @ngx-gallery/lightbox @angular/cdk
or
yarn add @ngx-gallery/lightbox @angular/cdk
- Import the module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GalleryModule } from '@ngx-gallery/core';
import { LightboxModule} from '@ngx-gallery/lightbox';
@NgModule({
imports: [
// ...
BrowserAnimationsModule,
GalleryModule.forRoot(galleryConfig?),
LightboxModule.forRoot(lightboxConfig?)
]
})
- Load images into the gallery
import { Component, OnInit } from '@angular/core';
import { Gallery, GalleryItem } from '@ngx-gallery/core';
import { Lightbox } from '@ngx-gallery/lightbox';
@Component({
template: `
<div class="grid">
<div class="grid-item" *ngFor="let item of items; let i = index" (click)="lightbox.open(i)">
<img [src]="item.data.thumbnail">
</div>
</div>
`
})
export class AppComponent implements OnInit {
items: GalleryItem[];
constructor(public lightbox: Lightbox, public gallery: Gallery) { }
ngOnInit() {
this.gallery.ref('lightbox').load(items);
}
}
See Lightbox Example.